Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第7章 Vue.js高级进阶 7.7 watch侦听属性

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第7章 Vue.js高级进阶

7.7 watch侦听属性

侦听属性：用于侦听data中数据的变化，只要data中的数据发生改变，就会触发watch侦听属性。

举个栗子：监听输入框中值的变化

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
30

• watch属性和data属性、methods属性平级
• 侦听属性的方法不能随意命名，方法名就是侦听的变量名。
• 数据发生变化，就会触发侦听方法

再举个栗子

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

• 因为侦听属性没有返回值，所以需要在data中定义isactive来控制样式的显示和隐藏、
• 一个侦听属性只能侦听一个变量

运行效果