this.$set()使用方法，详细教学（vue项目中this.$set()的妙用）

客官°小女子只卖身不卖艺 2023-10-02 23:02 5阅读 0赞

#### 一、对象使用this.$set()，修改和新增： ####

#### obj: \{ name: "小明", age: 18, \}, //对象 ####

**eg：this.$set(需要改变的对象，"需要改变的对象属性"，"新值")**

**1、对象修改**

this.$set(this.obj, "name", "小刘"); 
    //控制台输出：obj: { name: "小刘", age: 18, },

**2、对象新增**

this.$set(this.obj, "hobby", "study");
    //控制台输出：obj: { name: "小明", age: 18, hobby: "study"},

**3、对象新增未知（这里的item是传递的参数，不带引号，"reading"是参数值）**

this.$set(this.obj, item, "reading");

#### 二、数组使用this.$set()，修改和新增： ####

#### arr: \[ //数组对象 ####

#### \{ name: "小王", age: 18 \}, ####

#### \{ name: "小张", age: 20 \}, ####

#### \], ####

#### twoArr: \[11, 22, 33, \], //普通数组 ####

**eg：this.$set(需要修改的数组，需要修改的数组下标，\{ "要修改的数组对象，一个/多个" \})**

**1、数组修改**

数组对象：
    this.$set(this.arr, 1, { name: "小王", age: 19 });          
    //控制台输出：arr: [ { name: "小王", age: 18 },{ name: "小王", age: 19 }, ],

普通数组：
    this.$set(this.twoArr, 0, 99);       
    //控制台输出：twoArr: [99, 22, 33, ],

**2、数组新增**

**（1）首先获取需要新增的数组长度：**

let reslg = this.arr.length;

**（2）然后添加在数组末尾：**

this.$set(this.arr, reslg,{ name: "小紫", age: 18 },);
    //控制台输出：
        arr: [ 
            { name: "小王", age: 18 },
            { name: "小张", age: 20 },
            { name: "小紫", age: 18 },
            ],

####  ####

#### 同理，删除时数组或对象不更新时可以使用： ####

this.$delete(this.obj, "name")

## 补充：注意引号的使用！！！！！！ ##

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中XMLHttpRequest的详细使用方法

Vue中使用XMLHttpRequest（XHR）来获取数据的方式与传统的HTML页面相同。以下是Vue中XMLHttpRequest的详细使用方法： 1. 创建XMLHt

柔光的暖阳◎/ 2023年10月09日 22:50/ 0 赞/ 17 阅读

相关 this.$set()使用方法，详细教学（vue项目中this.$set()的妙用）

一、对象使用this.$set()，修改和新增： obj: \{ name: "小明", age: 18, \}, //对象 eg：this.$set(需要改变的对

客官°小女子只卖身不卖艺/ 2023年10月02日 23:02/ 0 赞/ 5 阅读

相关在vue项目中使用iconfont的方法

1:百度iconfont,找到阿里巴巴矢量图标库官网,https://www.iconfont.cn/然后注册登录,或者用github登录也行,此步骤跳过; 2、搜索需要的i

逃离我推掉我的手/ 2023年07月09日 08:26/ 0 赞/ 190 阅读

相关 Vue项目中Router路由中meta字段的妙用-案例

> 用Vue做网站登录验证时常用到Vue-Router官方路由器管理，这时候会调用beforeEach函数 // 登录验证 beforeEach((to,fr

深碍√TFBOYSˉ_/ 2022年08月30日 11:42/ 0 赞/ 132 阅读

相关 Python 中类的构造方法 new 的妙用

Python 的类中，所有以双下划线`__`包起来的方法，叫魔术方法，魔术方法在类或对象的某些事件发出后可以自动执行，让类具有神奇的魔力，比如常见的构造方法`__new__`、

青旅半醒/ 2022年08月28日 04:46/ 0 赞/ 204 阅读

相关 createDocumentFragment()方法的妙用

在更新少量节点的时候可以直接向document.body节点中添加，但是当要向document中添加大量数据时，如果直接添加这些新节点，这个过程非常缓慢，因为每添加一个节点都会

àì夳堔傛蜴生んèń/ 2022年06月02日 08:28/ 0 赞/ 246 阅读

相关 jq---data()方法的妙用

有这样一种场景：将左侧表格中的内容在点击添加的时候，右侧列表会增加相应的一列数据，然而反过来还需要点击右侧列的删除时相应的对左侧表格中的对应行操作，此时可以用jq的data()

朱雀/ 2022年05月28日 10:26/ 0 赞/ 229 阅读

相关真实项目中 ThreadLocal 的妙用

Java虫手 2019-07-07 14:53:57 ![真实项目中 ThreadLocal 的妙用][ThreadLocal] 一、什么是 ThreadLocal

朱雀/ 2021年12月10日 10:31/ 0 赞/ 388 阅读

相关 vue mixins和extends的妙用

转载自：https://juejin.im/post/5a38d222f265da4312810a76 写在前面 > vue提供了mixins、extends配置项，最

我就是我/ 2021年09月19日 19:42/ 0 赞/ 369 阅读

相关 vue keep-alive妙用

周所周知vue实现spa单页引用的核心原理是：根据url动态的切换组件但是每次切换组件时，组件都会重新实例化，数据初始化。那么有没有一个api，可以让组件在切换

Dear 丶/ 2021年09月19日 00:40/ 0 赞/ 285 阅读