java1234开源博客系统
博客信息

Vue.js 监听属性watch

0
发布时间:『 2019-06-30 22:04』  博客类别:Vue.js  阅读(721)

Vue.js 监听属性watch


平时我们写业务代码的时候,假如需要对某个数据进行监听,检测其值的改变,然后做一些对应的业务处理的时候,我们就可以用到监听属性warch。当然这个监听属性和计算属性,有时候我们都可以来处理同一个问题。所以一般哪个方便就用哪个;

我们搞个小实例,来计算某个用户输入数据的平方;这里我们可以对结果变量搞成计算属性,也可以搞监听属性监听用户输入的数据,也就是监听数据变量的变化;


我们先用前面学的计算属性实现,对结果数据搞计算属性;


<div id="app">

    &nbsp;&nbsp;<input type="text" v-model="n" style="width:30px">&nbsp;&nbsp;的平方是&nbsp;&nbsp;{{result}}

</div>


new Vue({

el:'#app',

data:{

n:1

},

computed:{

result(){

return this.n*this.n;

}

}

});



我们用监听属性实现,监听n变量;

new Vue({

el:'#app',

data:{

n:1,

result:1

},

watch:{

n(newN,oldN){

console.log(newN,oldN);

this.result=newN*newN;

}

}

});


监听属性写法有两种,上面我们搞的是 配置方式,还有一种是写事件代码方式,$watch;

let vm=new Vue({

el:'#app',

data:{

n:1,

result:1

}

});


 vm.$watch("n",function(newN,oldN){

console.log(newN,oldN);

this.result=newN*newN;

 });



关键字:   Vue.js     监听属性watch  
关注Java1234微信公众号
博主信息
Java1234_小锋
(知识改变命运,技术改变世界)
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有