vue 组件属性监听_Vue.js 监听属性

# Vue.js 监听属性

本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化:

~~~

Vue 测试实例 - 菜鸟教程(runoob.com)

千米 :

米 :

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;

}

}

});

// $watch 是一个实例方法

vm.$watch('kilometers', function (newValue, oldValue) {

// 这个回调将在 vm.kilometers 改变后调用

document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;

})

~~~

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。

当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

总结

以上是生活随笔为你收集整理的vue 组件属性监听_Vue.js 监听属性的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。