vue $set()使用复习总结

已于 2024-04-07 18:14:44 修改
阅读量207 收藏
点赞数
分类专栏： 前端之路 前端埋坑之路-前端技术 前端十年之路 文章标签： 前端 javascript
于 2024-04-07 18:09:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011565547/article/details/137472696
版权
本文总结了Vue中$set()方法的使用，包括一维数据下标的设置和数组对象中字段的更新，详细介绍了在循环内外的使用场景，并提到了单个变更的自然更新特性。
摘要由CSDN通过智能技术生成

一维数据：

this.$set(数组, 下标, '内容');
this.$set(this.typeList, 1, '榴莲');

数组对象：

this.$set( target要更改的数据源(可以是对象或者数组), key要更改的具体数据, value重新赋的值 )

 用法一： 循环外，单独使用

 

   

用法二 ： 循环中使用

this.$set(数组对象的其中一项, '字段', 值); 

this.dataVmList.map((item1) => {
	if (item.id === item1.id) {
		this.$set(item1,
了解本专栏 订阅专栏 解锁全文 超级会员免费看
做个有准备的人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue 全部知识点复习
Daisukes的博客
08-26 656
Vue2.0 MVC、MVVM MVC MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。 Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。 通常模型对象负责在数据库中存取数据。 View（视图）是应用程序中处理数据显示的部分。 通常视图是依据模型数据创建的。 Controller（控制器）是应用程序中处理用户交互的部分。 通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。 图示 M 模型（数据层如数据库） V 视图（视图层、HTM
Vue第6篇，Vue中的this.$set()使用教学，详细过程（vue项目中this.$set()的妙用）
热门推荐
weixin_65793170的博客
11-15 4万+
this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue的this.$forceUpdate()和this.$set()
最新发布
qq_71214810的博客
07-23 1215
使用this.$forceUpdate()可以强制组件重新渲染。在Vue.js中，Vue的响应式系统会自动追踪依赖的响应式属性，并在这些属性变化时自动更新DOM。但在某些情况下，如果你手动改变了 Vue 实例上某个数据属性的值...
vue中this.$set()的用法
袁的博客
10-20 1万+
vue中this.$set()的用法
Vue中$set使用
smouns_的博客
02-15 1986
Vue中$set使用
Vue之 $set的使用
weixin_44684357的博客
04-21 1万+
1，什么时候使用$set set为解决双向绑定失效而生，只需要关注什么时候双向绑定失效就可以了。 2，Vue.set 和 this.$set this.$set 实例方法，该方法是全局方法 Vue.set 的一个别名 3，$set 用法 数组： this.$set(Array, index, newValue) 对象： this.$set(Object, key, value) 4，实例 data中未定义，手动给form添加age属性，并且点击按钮进行自增。 如果使用 this.form.age
vue中$set的使用
weixin_52312684的博客
03-02 392
<div id="app"> <ul> <li>{{obj.name}}</li> <li>{{obj.age}}</li> <li>{{obj.sex}}</li> <li>{{obj.info.content}}</li> </ul> </div> ...
复习汇总vue知识点
weixin_61465262的博客
05-30 1940
一.历史介绍: 官网:https://cn.vuejs.org/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 兼容性：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMA...
Vue3复习和总结----组合式API-setup，终
zyugat的博客
11-17 960
Vue3复习和总结----组合式API-setup 代码全部放在->github仓库：https://github.com/zyugat/vue-review-all 详细文档可查看：zyugat.cn 前言：分为base、Component、router、Vuex、组合式API。5个部分。 base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli 组合式API-setup 将界面中重复的部分连同功能都提取为可重用的代码段 在 setup 中你应该避免使用 t
Vue.set() this.$set()引发的视图更新思考及注意事项
10-18
this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。这篇文章主要介绍了Vue.set() this.$set()引发的视图更新思考及注意事项,需要的朋友可以参考下
Vue2学习笔记之知识点大总结
Qiuxuntao的博客
05-20 1491
文章目录1、初识Vue2、Vue模版语法3、数据绑定4、el与data的两种写法5、MVVM模型6、Vue的数据代理7、事件处理7.1、事件的基本使用7.2、事件修饰符7.3、键盘事件8、计算属性 1、初识Vue 初识Vue： 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5
Vue中实现$set方法(Vue原理之步骤四)，前端面试知识点
2301_79098684的博客
04-04 1320
/获取到data对象中所有的键//循环遍历 实现数据代理i++){//设置为true,表示可以被遍历//可以删除属性,或者修改其特性(writable,configurable,enumerable)//获取值的时候触发//获取到的值返回出去},//修改值的时候触发//改变值的时候,给获取到的值赋值新值value})//调研判断是基本类型还是复杂类型的数据 来实现数据劫持//调用initWatch函数执行//$options参数对象中是否有watch这个属性。
$set()的使用方法
Cwhat的博客
04-15 898
$set是 Vue.js 中的一个全局API，主要用于动态向响应式对象中添加新属性或者修改已有属性，并确保新属性也是响应式的。的值在未来被更改，界面将会自动更新。对象添加一个新的响应式属性。
vue this.$set
ZoeLinJF的博客
09-04 593
data() { str: '111', arr: [1, 2, 7, 4], obj: { name: 'lin', age: 18 } } this.$set(this, 'str', 'aaa') // aaa this.$set(this.arr, 2, 3) // 1, 2, 3, 4 修改 this.$set(this.arr, this.ar...
Vue中的this.$set
05-10 1万+
当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了 官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 调用方法: Vue.set( target , key , value) target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据 （索引） value 重新赋的值 &lt..
Vue3 $set？
小草莓的博客
04-09 4万+
Vue3 $set?
this.$set ()的用法
weixin_52307122的博客
08-04 335
作用：当你发现一个对象的属性在控制台可以打印输出，但在网页视图中却没有进行渲染，此时就应该使 用this.$set() 方法。用法： this.$set(新赋值的数组/对象，操作的每一项，数据源头)官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，...
vue $set使用
12-02
这时候我们就需要使用Vue.js提供的$set方法来解决这个问题。 $set方法是Vue.js实例的一个方法，它可以用来向一个已经创建的对象添加一个新的属性，并且能够触发视图的更新。$set方法的语法如下： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

做个有准备的人

受益虽浅以资鼓励无限

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值