目录Vue中$set()的使用方法前言$set()的应用场景一$set()的应用场景二补充:vue中$set的用法$set用于更新数组:$set用于更新对象:Vue中$set()的使
由于 Vue 会在初始化实例时进行双向数据绑定,使用Object.defineProperty()
对属性遍历添加 getter/setter 方法,所以属性必须在 data 对象上存在时才能进行上述过程 ,这样才能让它是响应的。如果要给对象添加新的属性,此时新属性没有进行过上述过程,不是响应式的,所以会出现数据变化,页面不变的情况。此时需要用到$set
myInfo: {
name: 'wintercat',
age: '18'
}
this.myInfo.age = 23
属性是增加上去了,但一会之后你就会发现不对劲,为啥这个新增的属性不是响应式的,这种时候应该使用$set
去添加属性,this.$set(this.myInfo, 'age', 24)
,这时对象数据就变成响应式的了参数 | 描述 |
---|---|
target | 可以是数组或者对象,是准备添加属性的对象或者数组 |
name/index | 准备添加的属性的属性名或数字的索引 |
value | 准备添加的属性的值或者数组索引的值 |
newInfo:[],
info:[
{
age:20,
name:'张三'
},
{
age:30,
name:'李四'
},
{
age:40,
name:'王五'
},
]
我们先对数据进行循环然后通过$set
去添加需要的数据格式,这样我们拿到的数据就是我们想要的数据:name:age
this.info.map((item) => {
this.$set(this.newInfo, item.name, item.age)
})
console.log(this.newInfo)
// this.newInfo:[{'张三', 20},{'李四', 30},{'王五', 40}]
vue中$set的用法
$set用来更新数组或对象
$set接收3个参数:参数1:参数是需要更新的数组或对象,
参数2:是数组的下标或者对象的属性名,
参数3:是更新的内容
let arr =["周一","周二","周三","周四","周五","周六"];
//第一个参数是数组,第二个参数是下标索引,第三个参数是新的内容
this.$set(arr,5,"周日"];
//结果
console.log(arr);//arr=["周一","周二","周三","周四","周五","周日"]
//对象的属性sex的值更新为"女"
let obj={name:"小明",age:18,sex:"男"};
//第一个参数是对象,第二个参数是更新的属性名称,第三个参数是更新的内容
this.$set(obj,"sex","女");
//结果
console.log(obj)//obj={name:"小明",age:18,sex:"女"}
到此这篇关于Vue中$set()的使用方法的文章就介绍到这了,更多相关Vue中$set()使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue中$set()的使用方法场景分析
本文链接: https://www.lsjlt.com/news/196685.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