VUE-使用$set方法改变对像或数组,页面数据同步变化
1、对象:<h1 v-for="(item,index) in userInfo" :key="index">{{item}}</h1>data() {return {userInfo: {id:"1",name:"lucy"...
·
1、 对象:
<h1 v-for="(item,index) in userInfo" :key="index">{{item}}</h1>
data() {
return {
userInfo: {
id:"1",
name:"lucy"
},
}
}
页面展示效果:
1
lzz
追加数据:
this.$set(this.userInfo,"age","16");
追加之后的页面展示效果:
1
lzz
16
2、数组:
<h1 v-for="item in userInfo" :key="item.id">{{item.name}}</h1>
data() {
return {
userInfo: [{
id:"1",
name:"lucy"
},
{
id:"2",
name:"lily"
},
{
id:"3",
name:"tom"
}
]
}
}
页面展示效果:
lucy
lily
tom
追加数据:
let newObj={id:"3",name:"sam"};
this.$set(this.userInfo,3,newObj);
追加之后的页面展示效果:
lucy
lily
tom
sam
更多推荐
已为社区贡献32条内容
所有评论(0)