1. 程式人生 > >vue 資料動態響應介面

vue 資料動態響應介面

通過使用 $watch 屬性來實現資料的監聽,$watch 必須新增在 Vue 例項之外才能實現正確的響應。

例項中通過點選按鈕自動加 1。setTimeout 設定兩秒後計算器的值加上 20 。

<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 + '!');
});
setTimeout(
    function(){
        vm.counter = 20;
    },2000
);
</script>