watch监听属性使用场景
时间: 2024-01-12 22:23:06 浏览: 28
watch属性在Vue中用于监听属性的变化,并在属性发生变化时执行相应的操作。它可以用于多种场景,包括但不限于以下三种:
1. 基础版监听:
场景如下:输入框输入你的年龄,如果年龄在0-15岁之间,弹出提示框"你还是个孩子";如果年龄在16-30岁之间,弹出提示框"你已经成年了";如果年龄大于30岁,弹出提示框"你已经是一个成年人"。
```javascript
watch: {
age: function(newVal) {
if (newVal >= 0 && newVal <= 15) {
alert("你还是个孩子");
} else if (newVal >= 16 && newVal <= 30) {
alert("你已经成年了");
} else if (newVal > 30) {
alert("你已经是一个成年人");
}
}
}
```
2. 深度监听:
场景如下:监听一个对象的属性变化,并在属性发生变化时执行相应的操作。
```javascript
watch: {
obj: {
handler: function(newVal) {
// 对象属性发生变化时执行的操作
},
deep: true
}
}
```
3. 立即监听:
场景如下:监听一个属性的变化,并在属性发生变化时立即执行相应的操作。
```javascript
watch: {
prop: {
handler: function(newVal) {
// 属性发生变化时立即执行的操作
},
immediate: true
}
}
```
以上是watch属性的三种常见使用场景,根据具体需求选择相应的方式来监听属性的变化并执行相应的操作。