vue watch如何同时监听多个属性

本文探讨了如何在Vue中使用计算属性`listenChange`进行数据监听,并结合`watch`实现深度监听,确保当name1和name2相等时更新age。实例展示了如何通过即时和深度观察确保实时响应和复杂数据结构的处理。
摘要由CSDN通过智能技术生成

使用计算属性computed,监听计算属性

data () {
      return {
      		name1: '',
      		name2: '',
      		age: ''
      }
 },
computed: {
      listenChange () {
        const {name1,name2} = this
        return {name1,name2}
      }
    },
    
    watch: {
      listenChange (val) {
      		console.log('listenChange :', val)
      		if (val.name1 === val.name2) {
            this.$set(this,'age',1)
        	 } else {
            	this.$set(this,'age',null)
          	}
      }
    }

深度监听

data () {
      return {
      		name1: '',
      		name2: '',
      		age: ''
      }
 },
computed: {
      listenChange () {
        const {name1,name2} = this
        return {name1,name2}
      }
    },
    
    watch: {
    	listenChang: {
      		handler(newVal,oldVal) {
        		if (val.name1 === val.name2) {
          		this.$set(this,'age',1)
        		} else {
          			this.$set(this,'age',null)
        		}
      		},
      		immediate: true,
      		deep: true
    	}
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值