开发手册 欢迎您！
软件开发者资料库

VueJS - Watch Property

VueJS Watch Property - 从简单和简单的步骤学习VueJS，从基本到高级概念，包括概述，环境设置，简介，实例，模板，组件，计算属性，监视属性，绑定，事件，渲染，过渡和动画，指令，路由，混合，渲染功能，反应接口，示例。

在本章中，我们将了解Watch属性.举一个例子，我们将看到我们可以在VueJS中使用Watch属性.

示例

         VueJs Instance                           Kilometers :          Meters :       
               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;               }            }         });         

在上面的代码中，我们创建了两个文本框，一个千米，另一个米 .在数据属性中，公里和米被初始化为0.有一个使用两个函数千米和米创建的监视对象.在这两个函数中，完成了从公里到米以及从米到公里的转换.

当我们在任何texbox中输入值时，无论哪个更改，Watch都负责更新两个文本框.我们不必专门分配任何事件并等待它进行更改并进行额外的验证工作. Watch负责通过相应函数中的计算来更新文本框.

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

TextBox

让我们在千米文本框中输入一些值，并在米文本框中看到它的变化，反之亦然.

TextBox Changes

现在让我们输入米文本框并看到它在公里文本框.这是浏览器中显示的显示.

Watch