介绍
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
模版代码：
1
2
3
4
5
| methods: {
add() {
this.count += 1;
}
}
|
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div>{{ count }}</div>
<button @click="add">累加</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: {
add() {
this.count += 1;
}
}
})
</script>
</body>
</html>
|
通过上面的示例代码，我们可以发现：
- methods属性给可以给 Vue 定义
add方法
- 在方法中使用
this.可以直接访问data中的数据count
注意
很多小伙伴在定义方法时喜欢使用es6的语法，比如箭头函数() => {}，那么在给 Vue 定义方法时，是否也可以使用箭头函数呢？看一下下面的示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div>{{ count }}</div>
<button @click="add">累加</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: {
add: () => {
this.count += 1;
}
}
})
</script>
</body>
</html>
|
在浏览器中运行上面的示例代码，我们可以发现，当我们点击累加按钮时，数据并没有出现出现累加的结果。这是为什么呢？
了解过箭头函数的小伙伴应该知道，() => {}有一个用法就是改变this的指向，那么在 Vue 中，箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例。因此我们可以得出结论：不应该使用箭头函数来定义 method 函数。