Vue数组添加对象详解

在Vue框架下，我们经常需要用到对数组添加新的对象的功能，在本篇文章中，我们将从以下几个方面对Vue数组添加对象做详尽的说明。

一、通过unshift和push方法添加对象

Vue提供了unshift和push方法来在数组的首位或末尾添加新的元素。

data() {
  return {
    students: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 19}]
  }
},
created() {
  this.students.unshift({name: 'Lucy', age: 20});
  this.students.push({name: 'Lily', age: 22});
},

以上代码中，我们在created钩子中使用unshift方法在数组的最前面添加了一条{name: ‘Lucy’,age: 20}的数据，使用push方法在数组的最后面添加了一条{name: ‘Lily’,age: 22}的数据，这两个方法都可以方便快捷地添加新的对象。

二、通过splice方法添加对象

Vue的数组对象中还提供了splice方法，它可以在指定位置添加新的元素，并且还可以删除原数组中指定位置的元素。

data() {
  return {
    students: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 19}]
  }
},
created() {
    this.students.splice(1, 0, {name: 'Lucy', age: 20});
},

以上代码中，我们使用splice方法在数组的第二个位置（索引为1）添加了一条{name: ‘Lucy’, age: 20}的数据，其中的第二个参数0表示不删除任何元素，如果需要删除，可以设置第三个参数为删除的数量。

三、使用Vue.$set方法添加对象

在Vue中，我们有时需要通过Vue.$set方法来添加新的元素，这是因为Vue不能直接监听数组长度变化导致的。

data() {
  return {
    students: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 19}]
  }
},
created() {
  this.$set(this.students, 2, {name: 'Lucy', age: 20});
},

以上代码中，我们使用Vue.$set方法在数组的第三个位置（索引为2）添加了一条{name: ‘Lucy’, age: 20}的数据，如果直接使用students[2] = {name: ‘Lucy’,age: 20};添加，则不会触发Vue的响应式。

四、遍历数据添加对象

除了通过以上几种方法直接添加，我们在遍历数据的时候，也可以添加新的对象。

  

    {{s.name}}
    {{s.age}}
    添加
  



data() {
  return {
    students: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 19}]
  }
},
methods: {
  add(index) {
    this.students.splice(index, 0, {name: 'Lucy', age: 20});
  }
}

以上代码中，我们在遍历数组students的时候，给每个li元素添加了一个添加按钮，并且通过方法add(index)在数组students的指定位置添加了一条{name: ‘Lucy’, age: 20}的数据。

总结

以上就是对于Vue数组添加对象的详细说明，我们可以通过多种方式在Vue框架下添加新的对象，它们各有其适用的场景，使用时需要根据具体情况进行选择。