this.$set(obj, key, value),添加属性,删除,修改

最新推荐文章于 2024-04-09 13:12:49 发布
最新推荐文章于 2024-04-09 13:12:49 发布
阅读量1.3k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52005030/article/details/119565960
版权

给视图层添加属性

第一种方法:this.$set(obj, key, value)

第二种方法:引入import vue from 'vue'

         vue.set(obj, key, value)

对象的话:Object.assign(obj1, obj2)

删除属性:

this.$delete(obj, key, value), vue.delete(obj, key, value)

修改属性:

this.$set(obj, key, value),

或者是splice修改

閉丄眼聆厛倖輻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决 给数据赋值造成 深度相应 的 缺陷 问题 解决方法-----使用$set和$delete添加和删除
书山有路勤为径，学海无涯苦作舟
02-01 487
解决 给数据赋值造成 深度相应 的 缺陷 问题 解决方法-----使用$set和$delete添加和删除
this.$set(obj,key,value)与Vue.set(obj,key,value)
dream_girls的博客
08-24 199
this.$set(obj,key,value) 是将set函数绑定在Vue原型上，vue实例上使用 Vue.set(obj,key,value) 是将set函数绑定在Vue构造函数上，可以在store中使用 共同点： 都是用于修改或者添加对象中的值
vue this.$set()、this.$delete使用方法
最新发布
qq_48354174的博客
04-09 587
vue里 $set和$delete使用方法
vue中，this.$set的使用-this.$set(obj, key, value)和vue.set(obj, key, value)——给对象添加属性，而且视图层会响应该数据的变化
weixin_44867717的博客
08-30 615
js
使用$set修改对象某个属性的值以及$delete删除对象某个属性
是大林的林吖-博客
12-02 948
使用$set修改对象某个属性的值以及$delete删除对象某个属性 fun() { user = { name: '大林', age: 22, address: '广东深圳', desc: '123' } this.$delete(user , 'desc') this.$set(user , 'address', '广东广州') console.log(user) } 结果是user为{name: ‘大林’, age: 22, address: ‘广东广州’
Vue $set、$delete给对象动态添加，删除属性、并更新视图-响应式
林中明月间丶
08-08 1731
https://www.cnblogs.com/annie211/p/12654177.html <button @click="addObjB"></button> data:{ obj:{ a:'' } } methods:{ addObjB(){ this.$set(this.obj,'b',111) } } Vue数组、对象改变视图不更新： 第一种情况： 基本数据类型和对象：实例化的时候如果没有被加.
springBoot集成redis的key,value序列化的相关问题
08-25
* 此方法将会根据类名+方法名+所有参数的值生成唯一的一个 key，即使@Cacheable中的value属性一样，key也会不一样。 */ @Override public KeyGenerator keyGenerator() { System.out.println("RedisCacheConfig...
python dict 相同key 合并value的实例
12-23
# #### dict中将key相同的字典合并在一个对象里 """ a = {"a": 1, "b": 2, "c": 1} for k, v in a.iteritems(): tmp.setdefault(v, []).append(k) """ tmp = {} objs = OnlineScoringTeacher.objects.filter( ...
解决vue无法侦听数组及对象属性的变化问题
10-15
- 使用`this.$set(obj, key, value)`来实现增、改。 - 在`watch`中添加`deep: true`进行深度监听，但仅能监听属性值变化，无法监听新增、删除属性。 - 或者通过监听特定的键来观察变化，例如： ```javascript ...
详解Vue改变数组中对象的属性不重新渲染View的解决方案
01-19
但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上：如下代码: Vue.set(obj, '_isHover', true); 或者可以使用vm.$set的实列方法，也是Vue.set方法的别名： this.$set(o
List Set Map以及子类的比较 .docx
08-27
Collection 集合的方法有：add(obj) 添加一个元素，remove(object) 删除一个元素，contains(object) 判断是否存在元素，isempty() 判断集合是否为空，size() 返回集合里面元素的个数，toarray() 将集合变为数组，...
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
this.$set()用法，强制刷新，新删改查
zhangxueyou2223的博客
01-29 942
this.$set()用法，强制刷新，新删改查，用于在响应式对象上设置新的属性或修改已有的属性，强制刷新并确保这些属性也是响应式的。
this.$set()给对象新增属性this.$delete()删除属性
nyf_unknow的博客
03-28 2188
项目场景： 给对象添加属性 问题描述 测试数据 test: [ { name: '张三' }, { name: '李四' }, { name: '王五' } ], 打印结果 方法一：用this.$set()添加age属性 this.test.forEach((item) => { this.$set(item, 'age', '18') }) console.log(this.test) 打
vue2 对象、数组属性新增删除失去响应式($set、$delete) 和 vue3解构赋值原始类型失去响应式
guorui999的博客
01-19 4026
vue2 对象、数组属性新增删除失去响应式($set、$delete) 和 vue3解构赋值原始类型失去响应式
this.$delete delete this.$set
qq_38935512的博客
03-09 2612
var a=[1,2,3,4] var b=[1,2,3,4] delete a[1] console.log(a) //134 length4 (变为undefined) this.$delete(b,1) console.log(b) //134 length3 (完成删除) let obj={a:1,b:2} this.set去改变数组对象，vue能响应变化this.set去改...
vue中this.$set()方法
qq_45802159的博客
02-18 1198
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
vue对象和数组的增删改操作
weixin_43085797的博客
09-27 9610
一、对象 例： tableList: {}, 1、往对象里面添加属性： tableList: { name1:[], name2:[], name3:[], }, 2、给对象某个属性赋值，比如name1赋值： // 新增一条空数据 let newData = { age: null, number: null }; this.tab
this.$set()和Object.assign()解决vue2中的数组和对象里面的新增和删除元素时，不能实现数据响应的问题
weixin_47389477的博客
12-07 254
由于vue.js限制，vue监听不到一个已有对象添加的新属性的变化，只能在控制台可以看到，在视图页面上不会显示，所以可以用this.$set（object, key,value）和Object.assign(target,…source)解决
js中 this.$set(object, key, value) 解释
07-22
`this.$set(object, key, value)` 是 Vue.js 提供的一个全局方法，用于在 Vue 实例中设置响应式属性或更新已存在的响应式属性。 解释这个方法的参数： - `object`：要操作的对象，通常是 Vue 实例的数据对象或组件的属性对象。 - `key`：要设置或更新的属性名。 - `value`：要设置或更新的属性值。 这个方法主要用于以下两个情况： 1. 添加响应式属性：当需要在 Vue 实例的数据对象或组件的属性对象中添加新的属性时，如果直接使用赋值操作（例如 `this.obj.key = value`），Vue 无法检测到该属性的变化，导致视图无法自动更新。使用 `this.$set` 方法可以确保添加的属性是响应式的，即当该属性的值发生变化时，Vue 可以自动更新相关的视图。 ```javascript // 添加响应式属性 this.$set(this.obj, 'key', value); ``` 2. 更新已存在的响应式属性：当需要更新 Vue 实例的数据对象或组件的属性对象中已存在的属性时，如果直接使用赋值操作（例如 `this.obj.key = value`），Vue 可以检测到该属性的变化并更新相关视图。但如果在某些情况下，需要更新属性时确保它被触发为响应式变化，可以使用 `this.$set` 方法。 ```javascript // 更新已存在的响应式属性 this.$set(this.obj, 'key', newValue); ``` 需要注意的是，`this.$set` 方法只在 Vue 实例中可用，用于处理 Vue 的响应式数据。在其他普通 JavaScript 对象上不起作用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值