目录watch监听对象里面值的变化1.样式代码2.data里的代码3.watch监听watch如何深度监听对象变化深度监听总结watch监听对象里面值的变化 后台管理有时候有选择选择
后台管理有时候有选择选择框的不同选项,会影响下一个选择框的内容,如下图
.这个时候就可以用到watch监听
<div class="list">
订单类型:
<el-select v-model="getorderType" placeholder="请选择" @change="getchange">
<el-option
v-for="item in options1"
:key="item.orderType"
:label="item.label"
:value="item.orderType">
</el-option>
</el-select>
</div>
<div class="list">
操作对象:
<el-select v-model="getworksRegion" placeholder="请选择" @change="getchange1">
<el-option
v-for="item in options6"
:key="item.worksRegion"
:label="item.label"
:value="item.worksRegion">
</el-option>
</el-select>
</div>
data() {
return {
verifyData: this.propData,
editBoxShow: false,
options1: [{
orderType: '1',
label: '首次出售'
},{
orderType:"2",
label: "二次及以上挂售"
}
],
options2: [{
worksRegion: '0',
label: '原创作品'
},{
worksRegion:"1",
label: "首页大IP"
},
{
worksRegion:"3",
label: "盲盒"
}
],
options5: [{
worksRegion: '0',
label: '原创作品'
},{
worksRegion:"1",
label: "首页大IP"
},{
worksRegion:"2",
label: "官方藏品"
},
{
worksRegion:"3",
label: "盲盒"
}
],
options6:[],
queryParams:{
id:"",
orderType:'',//1 正常订单(首次出售), 2 挂售订单(二次及以上挂售)
worksRegion:"",// 0 原创 1 平台首发 2 官方藏品 3 盲盒
},
getorderType:"",
getworksRegion:"",
};
},
watch:{
'queryParams.orderType':function (newName,oldName){
if(newName==1){
this.options6 = this.options2
}else if(newName==2){
this.options6 = this.options5
}
}
},
重点监听对象的形式为
watch:{
'queryParams.orderType':function (newName,oldName){//newName 新数据 oldName 老数据
}
},
对以上例子和代码进行理解,就可以理解watch监听对象里的值的变化。
handler
:其值是一个回调函数。监听到变化时应该执行的函数。deep
:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)immediate
:其值是true或false;确认是否以当前的初始值执行handler的函数。当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时需要deep属性对对象进行深度监听
watch: {
obj: {
handler(newValue, oldValue) {
console.log(newValue.id);
this.fORMData.fid = newValue ? newValue.id : 0;
},
deep: true,
immediate: true
}
},
需要注意得到是 handler 是固定写法,不能用其他的。
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
上面的视图里 之所以刷新马上就执行了 handler函数,就是因为设置了 immediate 属性为 true
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: 使用watch监听对象里面值的变化
本文链接: https://www.lsjlt.com/news/177733.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0