Vue5：監聽屬性

Vue.js 監聽屬性

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

以下實例通過使用 watch 實現計數器：

<div id = "app">
    <p style = "font-size:25px;">計數器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">點我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('計數器值的變化 :' + oval + ' 變爲 ' + nval + '!');
});
</script>

以下實例進行千米與米之間的換算：

<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 = this.kilometers * 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>