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框架下添加新的對象，它們各有其適用的場景，使用時需要根據具體情況進行選擇。