vue 2 watch使用
时间: 2023-09-17 09:11:23 浏览: 42
Vue 2中的watch属性用于监听数据的变化,并在数据变化时执行相应的操作。
使用方法:
1. 在Vue实例中定义一个watch属性,可以是一个对象,也可以是一个函数。
2. 在watch属性中设置要监听的数据,并定义一个回调函数,在数据变化时执行该回调函数。
3. 在回调函数中可以执行任意操作,比如更新DOM、发送请求等。
示例代码:
```
<template>
<div>
<p>当前计数:{{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
watch: {
count(newValue, oldValue) {
console.log(`count变化了:${oldValue} -> ${newValue}`)
}
},
methods: {
increment() {
this.count++
}
}
}
</script>
```
在上述示例中,我们定义了一个计数器,每次点击“增加”按钮时,计数器的值会加1。同时,我们在watch属性中监听了count的变化,并在变化时输出了旧值和新值。
Vue 2中的watch属性还可以设置一些选项,比如deep、immediate等,用于更精细地控制监听行为。具体使用方法可以查看官方文档。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)