文章阅读

沉浸阅读完整内容

写文章

vue.set的用法

正在统计阅读人数 正在统计字数
登录收藏0
字号 100%

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']

推荐阅读

4 篇精选
文章 / 73vuex 数据存储读取 文章 / 76vue 图片资源引入 文章 / 74vue-cli安装脚手架 文章 / 75vue使用子组件

发表评论

评论 0

还没有评论,欢迎留下第一条讨论。

分享精彩,传递价值

生成专属海报,分享你的文章,让更多人发现好内容

浏览器不支持 Canvas,无法生成海报。

每日签到

每天来这里,记录一点持续积累。

当前积分--积分
本月签到--
本月获得--积分
正在读取