this.$set 适用于哪种情况

已于 2024-08-07 14:35:17 修改
阅读量192 收藏 1
点赞数 9
文章标签： javascript
于 2024-08-07 14:34:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fatpsm/article/details/140991488
版权

this.$set()适用于向响应式对象中添加新属性，‌并确保这个新属性同样是响应式的，‌且触发视图更新。‌

在Vue.js中，‌当你需要向一个对象动态添加一个新属性，‌并且希望这个新属性能够触发视图的更新时，‌就应该使用this.$set()方法。‌这是因为Vue无法自动检测到对象属性的添加，‌除非这个属性是在数据对象初始化时就存在的。‌

如果你尝试在运行时向已经创建的对象动态添加新属性，‌这个新添加的属性不会触发视图的更新。‌this.$set()方法解决了这个问题，‌它允许你在运行时向响应式对象添加新属性，‌并确保这个新属性能够触发视图的更新。‌

简单来说，‌当你发现给对象添加了一个新属性，‌这个属性在控制台可以打印出来，‌但是在视图中没有更新显示时，‌这时候就需要使用this.$set()方法。‌这个方法的功能就是确保新添加的属性不仅能够被正确地设置到对象上，‌而且还能够触发视图的更新，‌从而保持数据和视图的一致性

fatpsm
关注
this.$set的正确使用
weixin_42246997的博客
12-13 762
this.$set的正确使用 这段时间工作上经常操作数组数据，为data中的某一个对象添加一个属性，并且要求实时更新视图数据，这个时候首先想到的是 vue.set() 方法（注：当发现model上的数据发生改变，而页面上的视图数据没有改变，推荐使用该方法。），该方法的使用首先要在页面引入vue,应该这样写：import Vue from 'vue'，这样才能在组件全局获取到vue这个实例对象。如...
JS——this.$set用法（为某个对象添加属性）
qq_43201350的博客
07-25 2920
this.list = {} this.myName = 'abc' this.$set(this.list,"name",this.myName)
vue在某些情况下v-model不更新的原因
qq_40409143的博客
11-25 2625
有的时候数据更新了，但是页面没有更新，可以使用 this.set(target,key,value)例如：应用场景this.set(target,key,value) 例如： 应用场景 this.set(target,key,value)例如：应用场景this.set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.set（）这个方法了，简单来说this.set（）这个方法了，简单来说this.set（）这个方法了，简单
Vue第 6 篇，Vue中的this.$set()使用教学，详细过程（Vue项目中this.$set()的妙用）
weixin_65793170的博客
11-15 5万+
⭐this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。
Vue3从0到1开发组件前戏（中）：$emit,$on,$off替代方案
qq_35117063的博客
08-02 2333
本系列中会用到的第三方库 一、起因 上一篇文章中说过，在Vue的新版本，Vue3中删除了$on,$once,$off等方法，$emit仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序。 但是既然是组件开发，那么组件与组件之间的通信，组件与父级之间的通信肯定是少不了的，$emit方法虽然已经能满足半数以上的通信需求，但是剩下满足不了的部分，就是满足不了。所以就要用到市面上的第三方库来作为平替方案了。 Vue3迁移文档中提及:在 Vue 3 中，已经不可能使用这些 API 从组件
Python语言基础：set集合运用.pptx
05-03
总之，Python的set集合提供了一种灵活的方式来处理不重复的数据，适用于数据去重、查找共同项、排除重复项等多种场景，是编程中不可或缺的数据结构。通过熟练掌握set集合的使用，可以极大地提高代码的效率和可读性。
ref改变样式 vue_vue.js对样式的具体操作详解
weixin_39796868的博客
12-22 5239
使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改；1.v-bind:class || v-bind:style其中v-bind是指令，: 后面的class 和style是参数，而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究，反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)...
基于jQuery的打印插件——printThis.js使用说明文档
灼灼其华的博客
10-31 1万+
知识点解析： 1. 跨域操作的必要性        结合printThis的实际情况，动态生成的iframe打印内容和当前页面属于同一基础域名下的两个不同的子域，正常情况下，这两个子域是不能相互通信的，而我们的需求是用网站头部引入的样式去渲染打印文本即iframe的表现样式，所以必须实现跨域操作。 2. document.domain实现同一基础域名下不同子域之间的跨域操作
node-cocoadialog:适用于cocoaDialog的Node.js包装器
05-09
适用于Node.js包装器 注意：实际的cocoaDialog应用程序的问题应记录在其。 安装 $ npm install --save cocoadialog 基本用法 const cocoaDialog = require ( 'cocoadialog' ) . setGlobalOption ( { stringOutput :...
Vue使用this.$set动态添加属性值
yh_zeng2的博客
04-07 4444
如果不是使用this.$set动态添加属性值，这个属性值是可以添加上，但是不会作为响应式数据，也就是不会重新解析模板。
vue this.$set为对象添加属性或修改指定属性
qq_43862878的博客
11-09 4936
vue this.$set为对象追加属性或修改指定属性
This.$Set的用法和作用
热门推荐
lzfengquan的博客
07-09 12万+
1.this.$set实现什么功能，为什么要用它？ 当发现我们给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.set（）这个方法了，简单来说this.set（）这个方法了， 简单来说this.set（）这个方法了，简单来说this.set的功能就是解决这个问题的啦。 官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性， 因为 Vue 无法探测普通的新增属性 (比如 this.myObjec
this.$set的使用场景
weixin_38345306的博客
09-02 1193
适用场景： 给对象新增一个属性，并更新到视图上 官方解释： 向响应式对象添加一个属性，并确保这个属性同样是响应式的且触发视图更新。this.$set()必须用于向响应式对象添加新属性，因为Vue无法探测到普通的新增属性（例如等号赋值的）。在更改原有属性数据时，其和等号赋值没区别 用法： this.$set(target,key,value) target:要更改的对象或数组 key:新增的属性（或要更改的数据） value:新增的属性值（或重新赋值） this.$set()和Vue.set() 实现原理一模
vue中给对象添加属性（使用this.$set()）
铁锤妹妹的博客
04-13 2423
项目需求： 项目中需要判断当c_type ==3，在原来对象sendData基础上多传一个pinkId参数，有pinkId就传没有就传空值 具体办法 使用this.$set(a,b,c)添加新属性 这里有a,b,c三个参数 a:对象 b:属性名 c:属性值 例：sendData是一个对象，给sendData对象添加一个pinkId属性，值为有值的话就传，没有的话传空 this.$set(sendData,‘pinkId’,this.pinkId ? this.pinkId : ‘’) object.ass
Vue this.$set给vue对象动态添加新属性
潇湘子的博客
07-17 7513
语法： this.$set(target, key, value) target为需要添加属性的对象，key是要添加的属性名，一般是字符串形式，也可以是数字，value为属性key对应的值。 有时候我们定义在data()方法中的对象，在额外处理的时候可能需要，动态给它添加某些属性，这个时候我们直接 this.obj.xxx = ‘xxx’ 发现这种写法是不行的，视图没有更新： 原因：只有预先初始化，定义在data()函数中的属性，对象，vue实例在初始化的时候会触发object.definePropert
ECMAScript标准解析及其发展历史与技术演进
最新发布
qq_20245171的博客
10-15 765
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
实现vue的this.$set
07-19
Vue.js 中的 `this.$set` 是一个特殊的方法，用于动态地添加新的响应式属性到一个 Vue 实例的数据对象上。通常，直接修改数据对象的已有属性不会触发视图更新，而 `this.$set` 可以让新增或修改后的属性成为响应式的，并且能实时更新视图。 `this.$set` 方法接收三个参数： 1. 数据对象 (`object`): 需要添加新属性的目标对象。 2. 要添加或更新的键名 (`key`): 新属性的名称。 3. 值 (`value`): 对应的新属性值。 下面是一个简单的使用示例： ```javascript // 初始化数据对象 data() { return { user: {} } } methods: { updateUserProfile: function () { this.$set(this.user, 'name', 'John Doe'); // 动态添加或更新响应式属性 this.$set(this.user, 'age', 30); // 同样适用于设置数值等属性 } } ``` 如果你试图向一个已存在的非对象属性赋值，比如数组元素，Vue 也能检测到并自动增加长度，但为了保证安全和性能，对于这种情况推荐使用数组的索引来直接赋值： ```javascript this.user.newProperty = 'some value'; // 更好的做法 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值