這節(jié)我們主要學(xué)習(xí)methods屬性, 這個名字是固定的员魏，它是一個對象，用于存儲各種方法跷敬。{{方法名()}}就可以調(diào)用相應(yīng)的方法。
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法練習(xí)</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{greeting()}}</h2>
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
greeting:function(){
return 'Good Morning!';
}
}
})
</script>
</body>
</html>
那么热押，既然是方法西傀，就可以傳值來滿足不同的需求斤寇。在調(diào)用方法時傳參數(shù)，設(shè)置方法時通過一個參數(shù)才接收拥褂，這樣就能靈活的變換內(nèi)容了娘锁！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法練習(xí)</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{greeting('Afternoon')}}</h2>
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
greeting: function(time) {
return 'Good ' + time + '!';
}
}
})
</script>
</body>
</html>
如果要在當(dāng)前對象中拿data的屬性，直接使用Vue實例化的對象.name就可以了饺鹃，調(diào)用方法時也是直接拿對應(yīng)的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法練習(xí)</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{greeting('Afternoon')}}</h2>
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
name: '軟件1721'
},
methods: {
greeting: function(time) {
return 'Good ' + time + '!' + this.name;
}
}
})
</script>
</body>
</html>
運行結(jié)果
采用v-on指令調(diào)用方法
分別點擊“隱藏/顯示”按鈕可以切換內(nèi)容的顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令練習(xí)-隱藏和顯示</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="handleClick">隱藏/顯示文字</button>
<h2 v-if="show">{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
show: true
},
methods: {
handleClick: function() {
if (this.show) {
this.show = false;
} else {
this.show = true;
}
}
}
})
</script>
</body>
</html>
語法糖：v-on:click可以簡寫為@click
關(guān)注/取消關(guān)注練習(xí)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令練習(xí)——關(guān)注和取消關(guān)注</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" />
<style type="text/css">
.link {
cursor: pointer;
}
.followed {
color: rgb(66, 192, 46);
}
.cancel-followed {
color: rgb(150, 150, 150);
}
</style>
</head>
<body>
<div id="app">
<h2>{{user.name}}</h2>
<span class="cancel-followed link" v-show="user.followed === true" @click="handleFollow">
<i class="icon-ok"></i> 已關(guān)注
</span>
<span class="followed link" v-show="user.followed === false" @click="handleFollow">
<i class="icon-plus"></i> 關(guān)注
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
user: {
name: '簡書作者',
followed: true
}
},
methods: {
handleFollow: function() {
if (this.user.followed === true) {
this.user.followed = false;
} else {
this.user.followed = true;
}
}
}
})
</script>
</body>
</html>
年齡的增減練習(xí)
單擊“長一歲”可以使得age的值加1莫秆，雙擊“減五歲”可以使得age的值減5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令練習(xí)——年齡的變化</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{age}}</h2>
<!-- 綁定鼠標(biāo)單擊事件，調(diào)用無參方法可以不加括號 -->
<button type="button" @click="add">長一歲</button>
<!-- 綁定鼠標(biāo)雙擊事件悔详，并傳遞參數(shù)镊屎，調(diào)用有參方法必須加括號 -->
<button type="button" @dblclick="substract(5)">減五歲</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
age: 30
},
methods: {
add: function() {
this.age++;
},
substract: function(dec) {
this.age -= dec;
}
}
})
</script>
</body>
</html>
