一个例子搞定！VueJS监控属性watch用法和例子详解 _vue属性

上一节中，我们学习了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="http://img.readke.com/220411/0Z4001295-0.jpg">< /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内用各自函数中的计算更新文本框。
下面是浏览器的初始输出：