vue中使用$set方法给对象添加属性

已于 2024-07-11 11:52:20 修改
阅读量285 收藏
点赞数 2
分类专栏： vue 经验，学习 前端 文章标签： vue.js 前端 javascript
于 2024-07-11 11:51:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingdatiankong/article/details/140347914
版权
经验，学习 同时被 3 个专栏收录
117 篇文章 1 订阅
订阅专栏
前端
8 篇文章 0 订阅
订阅专栏
vue
5 篇文章 0 订阅
订阅专栏

vue中可以使用$set()给对象添加属性，但不是所有的对象都可以使用，vue中api明确说明，它必须用于向响应式对象上添加属性

响应式对象，vue的响应式原理，可以查看：深入响应式原理 — Vue.js

①对象赋值

this.$set(this.tmpObj,"tmpkey",value);

value可以是具体某个数据，也可以是数组、对象；

②数组

this.$set(this.tmpArr,index,value);

value可以是具体某个数据，也可以是数组、对象；

菜鸡程序员_小小
关注
专栏目录
Vue中this.$set的用法(解决数组、对象修改后不更新问题)
XinKun的博客
03-01 3万+
一、this.$set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’). 二、怎么用它？ 举个例子： 1.Vu
Vue中的$set
qq_45851085的博客
06-06 7146
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes,
使用this.$set给对象种添加属性
juju的博客
02-26 1097
我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性 <template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </div> </template> &l
Vue——04-01用$set给对象添加属性
NanChen的博客
10-21 757
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。 由于 JavaScript 的限制，Vue不能检测数组和对象的变化。 例：这里想点击按钮时添加一个新元素，用JavaScript新增元素 &.
【Vue-给对象新增属性（使用Vue.$set()）】
u012632105的博客
01-28 412
Vue-给对象新增属性（使用Vue.$set()） - 简书
Vue中 this.$set的用法
weixin_66375317的博客
07-05 1万+
Vue中 this.$set的用法
vue this.$set为对象添加属性或修改指定属性
最新发布
Williamqin_的博客
06-27 2973
在js中直接采用this.obj.attr = 'xxx'的方式修改对象的属性值，发现视图层没更新重新渲染出最新的数据，此时可以采用this.$set进行操作。语法：this.$set(target, propertyName/index, value)//{name: '李四', 'age': 18}this.$set(obj, 'name', '李四');//修改name属性值。//追加age属性并赋值。name: '张三'
Vue-为对象和数组新增属性 this.$set()
World_Mei的博客
05-06 7577
问题描述：vue的data里边是已经声明或者赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性或者操作数组元素，如果更新此属性的值，是不会更新视图的。 如下列代码： <template> <div> <ul> <template v-for="item in userInfo"> ...
Vue中的$set的使用实例代码
10-17
总的来说，Vue的`$set`方法是处理动态添加属性和数组元素的重要工具，确保了Vue的响应式系统可以正常工作，避免了视图与数据同步的问题。在实际开发中，当遇到需要添加或更新属性且希望视图能够响应变化时，应优先...
vue给对象动态添加属性和值的实例
10-16
本文介绍了在Vue中如何动态地给对象添加属性和值，并通过实例展示了动态属性添加在实际开发中的应用场景，如根据条件请求不同的接口。掌握了这种方法，可以使我们的代码更加灵活，并能更好地处理复杂的业务逻辑。 ...
深入理解vue中的$set
08-30
使用 $set 方法非常简单， 只需要将要设置的对象和属性值传递给它即可。例如：Vue.set(data, 'sex', '男')。这将设置 data 对象的 sex 属性值为 '男'，并触发视图的更新。 实例方法 $set 除了全局方法 $set 之外，...
Vue之Vue.set动态新增对象属性方法
11-30
当我们给一个比如props中，或者data中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用Vue.set方法 Vue.set方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是...
Vue方向：Vue实例上使用$set()更新对象或数组
qq_22905801的博客
03-24 435
在vue的实例方法中，$set可以更新对象数据或是数组，有时在实际的开发过程中，对象的数据可能会没有及时地更新，导致页面渲染的值还是旧值，这个时候就可以使用$set去重新更新下数据。
Vue第6篇，Vue中的this.$set()使用教学，详细过程（vue项目中this.$set()的妙用）
热门推荐
weixin_65793170的博客
11-15 4万+
this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。
vue中this.$set()的用法----更新数组和对象的值
m0_67391521的博客
03-06 2万+
我们先看看官网给出的解释： 1、更新数组: 我们有一个数组，包括人员姓名和人员年龄两个属性。 想要实现在页面刚加载的时候改变姓名为李四的人的信息。 首先我们想到的是在mouted函数中直接修改name为李四的人的信息 this.itemList[1] = { name: '李思思', age: 30 } console.log(this.itemList[1]); 但是这时候控制台打印的数据更新了，但是页面视图却没有更新。这时候我们就需要用到this.$set
this.$set()给对象新增属性this.$delete()删除属性
nyf_unknow的博客
03-28 2234
项目场景： 给对象添加属性 问题描述 测试数据 test: [ { name: '张三' }, { name: '李四' }, { name: '王五' } ], 打印结果 方法一：用this.$set()添加age属性 this.test.forEach((item) => { this.$set(item, 'age', '18') }) console.log(this.test) 打
vue中this.$set()的用法
袁的博客
10-20 1万+
vue中this.$set()的用法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值