«

vue.set的用法

时间:2023-7-1 10:39     作者:小诸葛     分类: Vue     正在检查是否收录...


vue.set 是 Vue.js 提供的一个全局方法,用于在响应式对象中新增属性或修改数组的索引值。vue.set 是为了解决 Vue.js 在默认情况下无法检测到对象属性的新增或数组索引的变化而引入的。

vue.set 方法接受三个参数:目标对象、属性名或数组索引、属性值。其用法如下:

Vue.set(target, propertyName/index, value)

修改数组的方法:(修改下标为2的元素为D)

let arr = ["a","b","c"];
this.$set(arr, 2, "d");

修改对象的方法:(修改name属性值为:李四)

let obj = {
  name: "张三",
  age: 18,
  sex: "男"
};
this.$set(obj, "name", "李四");

新增对象的方法:(修新增身高属性)

this.$set(obj, "height", 180);
{
  name: "李四",
  age: 18,
  sex: "男",
  height: 180
}

新增数组元素

// 假设data中有一个数组变量名为myArray
// 初始化数组
this.myArray = ['item1', 'item2', 'item3'];

// 添加新元素
this.$set(this.myArray, this.myArray.length, 'newItem');

// 现在myArray为['item1', 'item2', 'item3', 'newItem']

vue $set

推荐阅读:


扫描二维码,在手机上阅读