好记性不如个烂笔头:方便每次使用忘记的时候,看看点滴的累积,点滴的成长!
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;