定义数据对象:
obj: { name: "小明", age: 18, },
基本语法:
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");
定义数组包对象:
arr: [
{ name: "小王", age: 18 },
{ name: "小张", age: 20 },
],
定义普通数组:
twoArr: [11, 22, 33, ],
基本语法:
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")
this.$delete 也是一个实例方法,用于从响应式对象中删除属性,并确保该操作也是响应式的。
使用this.$delete 可以解决Vue响应式系统的另一个限制,即无法检测到通过索引直接删除数组元素的变化。通过this.$delete 方法,可以显式地告诉Vue,某个属性已经被删除,从而触发视图的更新。