5.Vue计算属性和监听器
计算属性
用computed来定义计算属性
作用: 调用计算属性时会显示return的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <body>
<div id='app'>
{{print}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello',
},
computed: {
print: function() {
return this.message + " World";
}
}
})
</script>
|
也可以在计算属性中定义get和set，当给计算属性赋值时会调用set，使用计算属性则会调用get
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
| <body>
<div id='app'>
{{print}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello',
},
computed: {
print: {
get: function() {
return this.message + " World";
},
set: function(newMsg) {
this.message = newMsg;
}
}
},
})
vm.print = "Hi";
</script>
|
注意: 不同于methods, 计算属性是有缓存的，只有值改变时才会重新计算
侦听器
用watch来定义侦听器
作用: 当值发生改变时会调用侦听器的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <body>
<div id='app'>
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello',
},
watch: {
message: function(newVal, oldVal) {
console.log(oldVal + "-->" + newVal);
}
}
})
vm.message = "Hi";
</script>
|