vue小结之 watch监听(对象,单个字段属性)

本文介绍了Vue中的watch特性,重点讲解了如何使用deep属性进行深层监听对象属性的变化,以及immediate属性在初始值传递时的触发应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

好记性不如个烂笔头:方便每次使用忘记的时候,看看点滴的累积,点滴的成长!

watch监听使用:

1.监听对象:

 <input type="checkbox" id="toggle-button" name="switch" v-model="data.busiCode[0].isLogin">

当isLogin为0 的时候 input:checkbox会为false 1是true。

deep属性:data某对象obj
watch 的一个属性 ,默认值是 false,表示深度监听,比如我们 data 里有busiCode[]数组:监听字段isLogin,

注意关键字deep:一层层的寻找你要监听的字段,直到找到为止!如果没有该属性,则监听不到isLogin。

  watch:{
        data: {
            handler(newVal, oldVal) {
                if(this.data.busiCode[0].isLogin === true){
                    this.data.busiCode[0].isLogin = 1
                } else if(this.data.busiCode[0].isLogin === false) {
                    this.data.busiCode[0].isLogin = 0
                }
            },
            deep: true
        } 
    },

监听某字段比如图片宽高的变化,赋值给相应的div:

  watch:{
        data: {
            handler(newVal, oldVal) {
               this.imgDivWidth = this.imgWh;//监听图片宽,设置div宽度
               this.imgDivHig = this.imgHig;//监听图片高,设置div高度
            },
         immediate:true
      
        }
    },

如果 父组件向子组件传值时 这时候值并没有发生改变我们却想在初始的时候就触发watch 就需要这个属性了 immediate  默认为false  为true时只初始化可以被监听

immediate属性:立即发生改变,使用场景:当父组件向子组件传值的时候,在初始的时候就赋值执行wa

代码这里就不放置了。就是deep:true一样的位置一样的写法它俩可以共存:immediate: true;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值