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 属性中,将 kmmeter 初始化为 0。创建一个具有两个功能kmmeterwatch 对象。 在这两个功能中,都完成了从公里到米以及从米到公里的转换。
    当我们在任何一个 texbox 中输入值时,无论哪个被更改,watch 都会更新两个文本框。 我们不必专门分配任何事件,也不必等待其更改并进行额外的验证工作。 watch 负责使用在各个功能中完成的计算来更新文本框。
    让我们看一下浏览器中的输出。
    watch
    让我们在“公里”文本框中输入一些值,然后在“米”文本框中看到它的变化,反之亦然。
    watch
    现在让我们在“米”文本框中输入内容,然后在“公里”文本框中查看它的变化。 这是在浏览器中看到的显示。
    watch