Vue.js 学习日志——监听属性（五）

Vue.js 监听属性

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。

---

用实例实现一个g与kg的单位换算：

<div id="app">
  <p>g与kg单位换算</p>
  g:<input type="number" v-model="g">
  kg:<input type="number" v-model="kg">
  <p id="info">kg修改前为: 0，修改后为: 0</p>
</div>

<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    g:0,
    kg:0
  },
  watch:{
    g : function(val){
      this.g = val;
      this.kg = this.g / 1000;
    },
    kg : function(val){
      this.g = val * 1000;
      this.kg = val;
    }
  }
})
vm.$watch('kg',function(nval,oval){
	document.getElementById ("info").innerHTML = "kg修改前为: " + oval + "，修改后为: " + nval;
})
</script>

以上代码中我们创建了两个输入框，并使用v-model进行双向数据绑定，data中g和kg的初始值为0。

watch对象中创建了两个方法，当我们在输入框输入数据时，watch会实时监听数据变化并改变自身的值。

---

效果预览：