srcmini上一节中，我们学习了VueJS计算属性computed的用法，包括computed自动计算属性、computed和methods的区别以及computed中的set和get方法。在本节我们将学习VueJS的监听属性功能，监听属性的使用比较简单，使用Vue的watch属性实现，下面我们看一个例子：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VueJS监听属性使用</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
公里：<input type="text" v-model="kilos">
米 ：<input type="text" v-model="meters">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
kilos: 0,
meters: 0
},
methods: {},
computed: {},
watch: {
kilos: function(value){
this.kilos = value;
this.meters = value * 1000;
},
meters: function(value){
this.kilos = value / 1000;
this.meters = value;
}
}
});
</script>
</body>
</html>
在上面的代码中，我们创建了两个输入框，一个是kilos公里，第二个meters是米，这里实现公里和米的转换。在Vue的data中，这两个属性初始化为0，在Vue的watch的属性中有两个方法：kilos和meters，这两个函数实现公里和米的互相转换。
当我们在两个输入框中的一个输入数字的时候，另一个会有相应的改变，watch负责这背后的更新，我们不需要专门分配任何事件，或等待它的更新和执行额外的验证工作，只需使用watch内用各自函数中的计算更新文本框。
下面是浏览器的初始输出：
在公里的文本框中输入数字，米的文本框中会有变化，如下：
在米的输入框中输入，查看公里输入的变化，如下：
评论前必须登录！
注册