vue 中的watch监听使用方法

wow_嘟嘟

于 2019-06-19 19:16:11 发布

阅读量539

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wow_tutou/article/details/92841684

博客介绍了监听 cityName 值改变的方法，可直接写监听处理函数，每次监听到值改变时执行函数，也能在所监听的数据后面加字符串形式的方法名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:

<input type="text" v-model="cityName"/>

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {      // ...    }
  } 
})

直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：

watch: {
    cityName: 'nameChange'
    }
 }