Vue之监听属性
监听属性是Vue.js提供的一种用来监听和响应Vue实例中的数据变化的方式。在监听数据对象中的属性时，每当监听的属性发生变化，都会执行特定的操作。监听属性可以定义在watch选项中，也可以使用实例方法vm.$watch()。运行结果如图：上述代码中，在watch选项中对fullname属性进行了监听。当改变该属性值的时候，会执行对应的回调函数，函数中的两个参数newValue和oldValue分别
文章共812字 · 阅读需要大约3分钟
一，什么是监听属性
监听属性是Vue.js提供的一种用来监听和响应Vue实例中的数据变化的方式。在监听数据对象中的属性时，每当监听的属性发生变化，都会执行特定的操作。监听属性可以定义在watch选项中，也可以使用实例方法vm.$watch()。
在watch选项中定义监听属性的示例代码如下：
<script>
var vm = new Vue({
el: '#app',
data: {
fullname: '韦小宝'
},
watch: {
fullname: function (newValue, oldValue) {
alert('原值:' + oldValue + '新值:' + newValue)
}
},
})
vm.fullname = '宋小宝'
</script>运行结果如图：
上述代码中，在watch选项中对fullname属性进行了监听。当改变该属性值的时候，会执行对应的回调函数，函数中的两个参数newValue和oldValue分别表示监听属性的新值和旧值。其中，第二个参数可以省略。
使用实例方法vm。Swatch()定义监听属性的示例代码如下:
<script>
var vm = new Vue({
el: '#app',
data: {
fullname: '韦小宝'
},
})
vm.$watch('fullname', function (newValue, oldValue) {
alert('原值:' + oldValue + '新值:' + newValue)
});
vm.fullname = '宋小宝'
</script>上述代码中，应用实例方法vm.$watch()对fullname属性进行了监听。运行结果跟上图一致。
应用监听属性实现人民币和美元之间的汇率换算，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人民币和美元汇率换算</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
¥：<input type="number" v-model="rmb"><p>
$：<input type="number" v-model="dollar"><p>
{{rmb}}人民币={{dollar | formatNum}}美元
</div>
<script type="text/javascript">
var exam = new Vue({
el:'#example',
data:{
rate : 6.8,
rmb : 0,
dollar : 0
},
watch : {
rmb : function(val){
this.dollar = val / this.rate;//获取美元的值
},
dollar : function(val){
this.rmb = val * this.rate;//获取人民币的值
}
},
filters : {
formatNum : function(value){
return value.toFixed(2);//保留两位小数
}
}
})
</script>
</body>
</html>运行结果如图：
二，deep选项
如果要监听的属性值是一个对象，为了监听对象内部值的变化，可以在选项参数中设置deep选项的值为true。示例代码如下：
<script>
var vm = new Vue({
el: '#app',
data: {
shop: {
name: 'iphone 14',
price: 5699
}
},
watch: {
shop: {
handler: function (val) {
alert(val.name + '新价格为' + val.price + '元');
},
deep: true
}
}
})
vm.shop.price = 6599
</script>运行结果如图：
当监听数据是一个数组或者对象时，回调函数中的新值和旧值是相等的，因为这两个形参指向是同一个数据对象
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)