Vue之监听属性

徐蔡坤

已于 2023-09-21 18:35:04 修改

阅读量6.1k

点赞数 9

文章标签： vue.js 前端 javascript

于 2023-07-26 16:39:03 首次发布

本文链接：https://blog.csdn.net/Ming_xm/article/details/131941708

版权

监听属性是Vue.js中用于响应数据变化的方法，可在数据改变时执行特定操作。可以通过watch选项或vm.$watch()方法定义。当监听对象时，使用deep选项能追踪深层属性变化。文章还展示了如何用监听属性进行人民币和美元的汇率转换，以及deep选项在对象属性变化时的运用。

摘要由CSDN通过智能技术生成

一，什么是监听属性

监听属性是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>

运行结果如图：