Vue监听属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>監聽屬性</title><script src="js/vue.js"></script></head><body><div id="app"><p style="font-size:25px;">計數器:{{counter}}</p><button @click="counter++" style="font-size:25px;">點我</button></div><div id="computed_propos">千米：<input type="text" v-model="kilometers" />米：<input type="text" v-model="meters" /><p id="info"></p></div><script>var vm = new Vue({el: '#app',data: {counter: 1}});vm.$watch('counter', function(nval, oval) {alert('計數器值的變化：' + oval + '變為' + nval + '!');});var v = new Vue({el: '#computed_propos',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 是一個實例方法v.$watch('kilometers', function(newValue, oldValue) {// 這個回調將在 vm.kilometers 改變后調用document.getElementById("info").innerHTML = "修改前值為：" + oldValue + "，修改后值為：" + newValue;})</script></body>
</html>
總結
- 上一篇： Vue计算属性
- 下一篇： html5倒计时秒杀怎么做,vue 设