# Vue.js 監聽屬性

本章節，我們將為大家介紹 Vue.js 監聽屬性 watch，我們可以通過 watch 來響應數據的變化:

~~~

Vue 測試實例 - 菜鳥教程(runoob.com)

千米 :

米 :

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;

})

~~~

以上代碼中我們創建了兩個輸入框，data 屬性中， kilometers 和 meters 初始值都為 0。watch 對象創建了兩個方法 kilometers 和 meters。

當我們再輸入框輸入數據時，watch 會實時監聽數據變化并改變自身的值。

總結

以上是生活随笔為你收集整理的vue 组件属性监听_Vue.js 监听属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。