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 负责使用在各个功能中完成的计算来更新文本框。

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

  

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

  

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