Vue.js 监听属性简单实例

    Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化。

    watch:用来监听每一个属性的变化
    watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用
    当属性发生改变那么就会触发watch函数,每个函数都会接受两个值,一个是新值,一个是旧值
    我们可以在watch当中就新旧值的判断来减少虚拟dom的渲染
    只要是当前的属性值发生改变就会触发它所对应的函数

实例1;

Vue.js 监听属性简单实例_第1张图片

当 counter 变化时,在 watch 中捕捉到,可以收到改变后的值;此处只是弹出一个提示框;

实例2;

程序最初运行如下;

Vue.js 监听属性简单实例_第2张图片

在输入框输入 A,变化如下;

Vue.js 监听属性简单实例_第3张图片

在输入框再输入C;

Vue.js 监听属性简单实例_第4张图片

 

 

 

 

 

你可能感兴趣的:(web前端,VUE,watch,监听属性)