methods屬性是定義方法的主要區(qū)域轩褐，在此屬性中，可以定義各種自定義函數(shù)名的方法以及參數(shù)
練習1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法練習</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>
從練習中可以看出methods方法
methods：{
方法名：function(）}
練習2:傳參數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法練習</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>
練習中將Afternoon傳給了參數(shù)time
采用v-on指令調(diào)用方法
分別點擊“隱藏/顯示”按鈕可以切換內(nèi)容的顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令練習-隱藏和顯示</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>
關(guān)注/取消關(guān)注練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令練習——關(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>
年齡的增減練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令練習——年齡的變化</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{age}}</h2>
<button type="button" @click="add">長一歲</button>
<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>
