可以通過 watch 來響應數據的變化 以下實例通過使用 watch 實現計數器： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https:/ ...
可以通過 watch 來響應數據的變化
以下實例通過使用 watch 實現計數器：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <p>{{couter}}</p> <button @click="couter++">+1</button> </div> <script> var vm=new Vue({ el: '#demo', data: { couter:1 } }) //vm監聽事件變化，第一個參數是新值，第二個參數是舊值 vm.$watch("couter",function(newVal,oldVal){ document.write("上次是："+oldVal+"這次是："+newVal) }) </script>
以下實例進行千米與米之間的換算
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> 千米：<input type="text" v-model="kilometers"> 米：<input type="text" v-model="meters"> <p id="info"></p> </div> <script> var vm=new Vue({ el: '#demo', data: { kilometers:0, meters:0, }, watch:{ kilometers:function(ki){ this.kilometers=ki this.meters=ki*1000 }, meters:function(me){ this.kilometers=me/1000 this.me=me } } }) //vm監聽事件變化，第一個參數是新值，第二個參數是舊值 //kilometers值發生改變時，執行回調 vm.$watch("kilometers",function(newVal,oldVal){ document.getElementById ("info").innerHTML = "修改前值為: " + oldVal + "，修改後值為: " + newVal; }) </script>
