VueJS Watch 属性 - 菜鸟教程

定义和使用

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

示例

下面的示例演示，我们将看到可以在 VueJS 中使用 watch 属性。

<div id="computed_props">
   公里 : <input type = "text" v-model = "kilometers">
   米 :  <input type = "text" v-model = "meters">
</div>
<script>
var vm = new Vue({
   el: '#computed_props',
   data: {
      kilometers : 0,
      meters:0
   },
   methods: {
   },
   computed :{
   },
   watch : {
      kilometers:function(val) {
         this.kilometers = val;
         this.meters = val * 1000;
      },
      meters : function (val) {
         this.kilometers = val/ 1000;
         this.meters = val;
      }
   }
});
</script>

尝试一下

示例说明

在上面的代码中，我们创建了两个文本框，一个带有公里，另一个带有米。在 data 属性中，将 km 和 meter 初始化为 0。创建一个具有两个功能km 和 meter 的 watch 对象。在这两个功能中，都完成了从公里到米以及从米到公里的转换。

当我们在任何一个 texbox 中输入值时，无论哪个被更改，watch 都会更新两个文本框。我们不必专门分配任何事件，也不必等待其更改并进行额外的验证工作。 watch 负责使用在各个功能中完成的计算来更新文本框。

让我们看一下浏览器中的输出。

让我们在“公里”文本框中输入一些值，然后在“米”文本框中看到它的变化，反之亦然。

现在让我们在“米”文本框中输入内容，然后在“公里”文本框中查看它的变化。这是在浏览器中看到的显示。