当前位置:   article > 正文

this.$set()用法,强制刷新,新删改查

this.$set()用法,强制刷新,新删改查

this.$set 是Vue中的一个方法,用于在响应式对象上设置新的属性或修改已有的属性,强制刷新并确保这些属性也是响应式的。

  1. 定义数据对象:
  2. obj: { name: "小明", age: 18, },
  3. 基本语法:
  4. this.$set(需要改变的对象,"需要改变的对象属性""新值")

2.对象修改 

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

 3、对象新增未知属性(这里的item是传递的参数,不带引号,"reading"是参数值)

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

 对象新增

  1. this.$set(this.obj, "hobby", "study");
  2. 控制台输出:obj: { name: "小明", age: 18, hobby: "study"},
数组 使用this.$set(),修改和新增
  1. 定义数组包对象:
  2. arr: [
  3. { name: "小王", age: 18 },
  4. { name: "小张", age: 20 },
  5. ],
  6. 定义普通数组:
  7. twoArr: [11, 22, 33, ],
  8. 基本语法:
  9. this.$set(需要修改的数组,需要修改的数组下标,{ "要修改的数组对象,一个/多个" })

 数组修改

  1. 修改数组对象:
  2. this.$set(this.arr, 1, { name: "小王", age: 19 });
  3. 控制台输出:arr: [ { name: "小王", age: 18 },{ name: "小王", age: 19 }, ],
  4. 修改普通数组:
  5. this.$set(this.twoArr, 0, 99);
  6. 控制台输出:twoArr: [99, 22, 33, ],

 数组新增

  1. //1)首先需要获取新增的数组长度:
  2. let reslg = this.arr.length;
  3. //2)然后添加在数组末尾:
  4. this.$set(this.arr, reslg,{ name: "小紫", age: 18 },);
  5. 控制台输出:
  6. arr: [
  7. { name: "小王", age: 18 },
  8. { name: "小张", age: 20 },
  9. { name: "小紫", age: 18 },
  10. ],

 this.$delete 删除

基本语法:
this.$delete(this.obj, "name")

  1. 基本语法:
  2. this.$delete(this.obj, "name")

this.$delete 也是一个实例方法,用于从响应式对象中删除属性,并确保该操作也是响应式的。

使用this.$delete 可以解决Vue响应式系统的另一个限制,即无法检测到通过索引直接删除数组元素的变化。通过this.$delete 方法,可以显式地告诉Vue,某个属性已经被删除,从而触发视图的更新。

补充:使用时,注意双引号("")的使用!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/article/detail/49256
推荐阅读
相关标签
  

闽ICP备14008679号