Vue.js 監聽屬性 · 前端開發手冊

# Vue.js 監聽屬性本章節，我們將為大家介紹 Vue.js 監聽屬性 watch，我們可以通過 watch 來響應數據的變化: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 }, methods: { }, computed :{ }, 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) { // 這個回調將在 vm.kilometers 改變后調用 document.getElementById ("info").innerHTML = "修改前值為: " + oldValue + "，修改后值為: " + newValue; }) </script> </body> </html> ~~~ 以上代碼中我們創建了兩個輸入框，data 屬性中， kilometers 和 meters 初始值都為 0。watch 對象創建了兩個方法 kilometers 和 meters。當我們再輸入框輸入數據時，watch 會實時監聽數據變化并改變自身的值。