我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue中$set()的使用方法场景分析

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue中$set()的使用方法场景分析

Vue中$set()的使用方法

前言

由于 Vue 会在初始化实例时进行双向数据绑定,使用Object.defineProperty()对属性遍历添加 getter/setter 方法,所以属性必须在 data 对象上存在时才能进行上述过程 ,这样才能让它是响应的。如果要给对象添加新的属性,此时新属性没有进行过上述过程,不是响应式的,所以会出现数据变化,页面不变的情况。此时需要用到$set

$set()的应用场景一

  • 在使用 vue 进行代码开发时,经常会遇到需要给一个响应式对象增加属性的情况
  • 示例数据
myInfo: {
  name: 'wintercat',
  age: '18'
}
  • 刚开始我们可能会这样写this.myInfo.age = 23属性是增加上去了,但一会之后你就会发现不对劲,为啥这个新增的属性不是响应式的,这种时候应该使用$set去添加属性,this.$set(this.myInfo, 'age', 24),这时对象数据就变成响应式的了
  • 这个方法接收三个参数
参数描述
target可以是数组或者对象,是准备添加属性的对象或者数组
name/index准备添加的属性的属性名或数字的索引
value准备添加的属性的值或者数组索引的值

$set()的应用场景二

  • 在我们拿到后端返回的数据进行页面渲染时发现需要显示的数据的字段名都是一样的,但是给了一个字段名进行区分,这种情况下我们就需要拿到进行区分的字段名的值当做键名,通过使用键值对的形式返回一个新的数据对页面进行渲染
  • 示例数据
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的用法

vue中$set的用法

$set用来更新数组或对象

$set接收3个参数:参数1:参数是需要更新的数组或对象,
                参数2:是数组的下标或者对象的属性名,
                参数3:是更新的内容

$set用于更新数组:

let arr =["周一","周二","周三","周四","周五","周六"];
//第一个参数是数组,第二个参数是下标索引,第三个参数是新的内容
this.$set(arr,5,"周日"];
//结果
console.log(arr);//arr=["周一","周二","周三","周四","周五","周日"]

$set用于更新对象:

//对象的属性sex的值更新为"女"
let obj={name:"小明",age:18,sex:"男"};
 //第一个参数是对象,第二个参数是更新的属性名称,第三个参数是更新的内容
this.$set(obj,"sex","女");
 //结果
console.log(obj)//obj={name:"小明",age:18,sex:"女"}

到此这篇关于Vue中$set()的使用方法的文章就介绍到这了,更多相关Vue中$set()使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue中$set()的使用方法场景分析

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue中$set()的使用方法场景分析

由于Vue会在初始化实例时进行双向数据绑定,使用Object.defineProperty()对属性遍历添加getter/setter方法,所以属性必须在data对象上存在时才能进行上述过程,这样才能让它是响应的,这篇文章主要介绍了Vue中$set()的使用方法场景分析,需要的朋友可以参考下
2023-02-18

Vue中created和mounted使用场景分析

vue.js中created方法是一个生命周期钩子函数,一般可以在created函数中调用ajax获取页面初始化所需的数据,这篇文章主要介绍了Vue中created和mounted使用场景分析,需要的朋友可以参考下
2023-05-20

redis中set的使用场景有哪些

Redis中的Set数据结构常用于以下场景:1. 去重:Set中的元素是唯一的,可以用来存储一组唯一的值,比如用户的标签、IP地址等。2. 计数:Set中的元素不重复,可以用来统计某个事件的不同用户数、不同IP数等。3. 关联关系:Set中
2023-09-04

Go中sync 包Cond使用场景分析

Cond 是和某个条件相关,在条件还没有满足的时候,所有等待这个条件的协程都会被阻塞住,只有这个条件满足的时候,等待的协程才可能继续进行下去,这篇文章主要介绍了Go中sync 包的Cond使用场景分析,需要的朋友可以参考下
2023-03-03

Vue中的侦听器及使用场景

Vue中的侦听器是一种响应式机制,可以对指定的数据进行监听,并在数据变化时执行相应的回调函数。常用于监听复杂数据类型的变化,如对象和数组。通过侦听器,可以实现数据的自动更新和逻辑处理等功能,提高代码的可读性和可维护性
2023-05-18

JS apply用法总结和使用场景实例分析

apply() 方法的作用是在一个对象上调用另一个对象的方法。apply() 方法的语法如下:function.apply(thisArg, [argsArray])其中,thisArg 是可选的,在函数运行时使用的 this 值。如果 t
2023-08-09

Javascript闭包使用场景的原理分析

这篇文章给大家分享的是有关Javascript闭包使用场景的原理分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、闭包Javascript中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部
2023-06-25

React中memouseCallbackuseMemo方法作用及使用场景

这篇文章主要为大家介绍了React中三个hooks方法memouseCallbackuseMemo的作用及使用场景示例,有需要的朋友可以借鉴参考下,希望能够有所帮助
2023-03-06

C++ 函数中默认参数的使用场景分析

默认参数用于简化函数调用、提供可选功能和提高代码可读性。具体场景包括:1. 省略不常用的参数;2. 为可选功能提供默认值;3. 明确指定默认值提升代码可理解性。C++ 函数中默认参数的使用场景分析简介默认参数允许在调用函数时省略参数值,
C++ 函数中默认参数的使用场景分析
2024-04-19

如何正确使用 Java 的 concat 方法及其适用场景?(Java concat方法的使用场景)

在Java编程中,concat方法是一个非常常用且重要的字符串操作方法。它主要用于将两个或多个字符串连接在一起,生成一个新的字符串。一、concat方法的基本语法concat
如何正确使用 Java 的 concat 方法及其适用场景?(Java concat方法的使用场景)
Java2024-12-22

Java锁在工作中使用场景实例分析

今天小编给大家分享一下Java锁在工作中使用场景实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1、synchroni
2023-06-29

编程热搜

目录