欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

VUE之监听属性 watch

发布时间：2024/1/23 编程问答 47 豆豆
生活随笔 收集整理的这篇文章主要介绍了 VUE之监听属性 watch 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>VUE监听属性</title><script src="js/vue.min.js"></script></head><body><div id="app"><p style="font-size: 25px;">自增器</p><button @click="counter++" style="font-size: 25px;">点我</button></div><script>var vm=new Vue({el:'#app',data:{counter:1}})vm.$watch('counter',function(nval,oval){console.log('自增器值的变化：'+oval+'变为:'+nval+'|')})</script></body> </html>

 

 

则每次单击按钮的时候，console的输出值会自增。

 

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>VUE监听案例2</title><script src="js/vue.min.js"></script></head><body><div id="computed_props">千米:<input type="text" v-model="kilometers" />米:<input type="text" v-model="meters" /></div><script>var vm=new Vue({el:'#computed_props',data:{kilometers:0,meters:0},methods:{},watch:{kilometers:function(val){this.kilometers=val;this.meters=val*1000;},meters:function(val){this.kilometers=val/1000;this.meters=val;}}})//$watch是一个实例方法;vm.$watch('kilometers',function(newValue,oldValue){document.getElementById('info').innerHTML='修改前值为：'+oldvalue+",修改后值为："+newvalue;})</script></body> </html>

总结

以上是生活随笔为你收集整理的VUE之监听属性 watch的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。