Vue中this.$set的使用

最新推荐文章于 2023-08-13 15:05:35 发布
最新推荐文章于 2023-08-13 15:05:35 发布
阅读量739 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GreyCastle/article/details/107796733
版权
本文详细介绍了Vue.js框架中this.$set方法的使用，解释了如何通过this.$set向响应式对象添加新属性，确保属性的响应式并触发视图更新。包括在对象和数组中使用this.$set的具体语法。
摘要由CSDN通过智能技术生成

一、什么是this.$set，实现了什么功能

this.$set向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新，用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')，你会发现vue官网是vue.set。这个this.$set()和它有什么关系呢？咱先说this.$set()，因为他们俩的区别就涉及原理问题。

二、使用this.$set

对象中使用：

三个参数：this.$set("改变的对象"，"改变的对象属性"，"值")

数组中使用：

三个参数：this.$set("改变的数组"，"下标"，"值")

 

 

 

 

vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
this.$set的正确使用
热门推荐
hhkongbai的博客
09-19 23万+
this.#set(obj, key, value) 我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性 <template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} &l...
this.$set的参数和用法
weixin_44706322的博客
09-29 4390
Vue.$set(target,key,value) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据(可以是字符串和数字) value ：重新赋的值 用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 注：Vue.set()在methods中也可以写成this.$set() Vue.set()不光能修改数据，还能添加数据 data:{...
vue中this.$set的用法
我胆小
04-02 2168
vue中this.$set的用法 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么功能，为什么要用它？ 2.怎么用它？ 3.应用场景 1.this.$set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就...
从vue源码解析Vue.set()和this.$set()
12-11
最近死磕了一段时间vue源码，想想觉得还是要输出点东西，我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。 Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对 数组或者对象...
【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx
12-29
总结来说，Vue.set()和this.$set()是用来解决Vue中对象属性动态添加时的响应性问题。在开发中，当需要确保数据变化能够反映到视图上时，应优先考虑使用这两个方法。了解它们的工作原理和正确使用方法，能够避免出现...
Vue中this.$nextTick的作用及用法
11-21
在这种情况下，可以使用`this.$set`方法来添加响应式的属性，如`this.$set(this.someObject, 'b', 2)`。 接下来，我们要讨论的是Vue的异步更新队列。Vue不会立即更新DOM，而是将所有在同一个事件循环中发生的多个...
Vue中 this.$set的用法
海带的博客
01-20 1261
Vue中this.$set的用法 Vue.set( target, propertyName/index, value ) 参数 {Object | Array} target {string | number} propertyName/index {any} value <template> <div class="page" id="app"> <button @click="add">设置</button> <ol>
vue中this.$set()的用法
袁的博客
10-20 1万+
vue中this.$set()的用法
Vue之this.$set Vue.set
weixin_40741265的博客
12-11 401
列表渲染，对数组的操作（增删改查）有三种方式可以实现页面即时更新：1.利用数组的变异方法（pop,push,shift,unshift,sort,reverse,splice） 2.改变数组的引用地址 3.通过使用全局变量Vue.set（数组名，属性，属性值） 对对象的操作，两种方式实现页面更新：1.改变对象的引用地址 2.通过使用Vue.set或者vue.$set方法。 注意：通过数组下标更...
Vue中的this.$set
05-10 1万+
当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了 官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 调用方法: Vue.set( target , key , value) target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据 （索引） value 重新赋的值 &lt..
vue中$set的用法
weixin_42504805的博客
12-22 568
vue中set用法
this.$set用法
passWordEnterX的博客
12-02 891
vue中this.$set() 用法
This.$Set的用法和作用
m0_67841039的博客
08-13 683
This.$Set的用法和作用
Vue 6 ，Vue中的this.$set()使用教学，详细过程（Vue项目中this.$set()的妙用）
weixin_65793170的博客
11-15 5万+
⭐this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。
vue中this.$set()的用法----更新数组和对象的值
慎独的博客
10-21 4万+
我们先看看官网给出的解释： 1、更新数组: 我们有一个数组，包括人员姓名和人员年龄两个属性。 想要实现在页面刚加载的时候改变姓名为李四的人的信息。 首先我们想到的是在mouted函数中直接修改name为李四的人的信息 this.itemList[1] = { name: '李思思', age: 30 } console.log(this.itemList[1]); 但是这时候控制台打印的数据更新了，但是页面视图却没有更新。这时候我们就..
vue中this.$set的使用
最新发布
04-13
在Vue中，this.$set是一个用于动态添加响应式属性的方法。通常情况下，当你使用Vue.set或者this.$set来给一个对象添加一个新的属性时，这个属性将不会触发视图的更新。但是，使用this.$set可以确保新添加的属性也能够触发视图的更新。 this.$set的语法如下： this.$set(object, key, value) 其中，object是要添加属性的对象，key是要添加的属性名，value是要添加的属性值。 下面是一个示例，展示了如何使用this.$set来动态添加属性： ``` <template> <div> <p>{{ message }}</p> <button @click="addProperty">Add Property</button> </div> </template> <script> export default { data() { return { message: 'Hello, Vue!' }; }, methods: { addProperty() { this.$set(this, 'newProperty', 'This is a new property'); } } }; </script> ``` 在上面的示例中，当点击按钮时，addProperty方法会调用this.$set来给当前组件实例添加一个名为newProperty的属性，并将其值设置为"This is a new property"。由于使用了this.$set，新添加的属性会触发视图的更新，从而在页面上显示出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值