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

一、对象使用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")

补充:注意引号的使用!!!!!!

猜你喜欢

转载自blog.csdn.net/weixin_65793170/article/details/127869019
今日推荐