VUE之监听属性 watch
生活随笔
收集整理的這篇文章主要介紹了
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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VUE计算属性关键词: computed
- 下一篇： 罗振宇和束昱辉们