Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器:
<div id="app">
<p>当前数字:{{count}}</p>
<button type="button" v-on:click="add()">+</button>
<button type="button" v-on:click="jf()">-</button>
</div>
<p id="msg"></p>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
count:0
},
methods:{
add:function(){
this.count++;
},
jf:function(){
this.count--;
}
}
});
vm.$watch('count', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("msg").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
</script>