Vue實現刪除數組中指定元素的方式

一、使用splice方法進行刪除

Vue中的數組對象提供了很多常用的方法，其中splice方法可以用來刪除指定位置的元素，具體使用方式如下：

let arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 1); //刪除數組中索引為1的元素，即'b'
console.log(arr); //輸出['a', 'c', 'd']

我們可以在Vue的computed屬性中使用這個方法去刪除數組中指定的元素。例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arrComputed" :key="index">
        {{ item }}
        <button @click="removeItem(index)">刪除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['a', 'b', 'c', 'd', 'e', 'f'],
    };
  },
  computed: {
    arrComputed() {
      return this.arr;
    },
  },
  methods: {
    removeItem(index) {
      this.arr.splice(index, 1);
    },
  },
};
</script>

在上述代碼中，我們首先定義了一個arr數組，並將其轉化為computed屬性arrComputed。接著，在v-for中遍歷arrComputed並渲染到頁面中。在每個li元素後面添加了一個刪除按鈕，並通過@click事件將對應的index傳遞給了removeItem方法，該方法使用splice方法將對應位置的元素刪除。這樣每次點擊按鈕時，都會刪除該元素，並重新計算arrComputed的值，Vue會自動更新視圖。

二、使用filter方法進行刪除

除了splice方法，我們還可以使用filter方法來刪除數組中的指定元素。與splice不同的是，filter不會改變原始數組，而是會返回一個新的數組，該數組不包含要刪除的元素。具體使用方式如下：

let arr = ['a', 'b', 'c', 'd'];
arr = arr.filter((item, index) => index !== 1);
console.log(arr); //輸出['a', 'c', 'd']

同樣地，在Vue中可以使用computed屬性與filter方法來實現刪除指定元素的功能，例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arrComputed" :key="index">
        {{ item }}
        <button @click="removeItem(index)">刪除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['a', 'b', 'c', 'd', 'e', 'f'],
    };
  },
  computed: {
    arrComputed() {
      return this.arr.filter((item) => item !== 'c');
    },
  },
  methods: {
    removeItem(index) {
      this.arr.splice(index, 1);
    },
  },
};
</script>

在上述代碼中，我們利用computed屬性中的filter方法篩選出不含c元素的數組。當用戶點擊刪除按鈕時，仍然通過splice方法刪除對應位置的元素，Vue會自動重新計算arrComputed的值並更新頁面。

三、使用slice方法進行刪除

除去上述方法外，我們還可以使用slice方法來刪除數組中的指定元素，具體使用方式如下：

let arr = ['a', 'b', 'c', 'd'];
let newArr = arr.slice(0, 1).concat(arr.slice(2));
console.log(newArr); //輸出['a', 'c', 'd']

上述代碼中，我們首先使用slice方法取出要刪除的元素之前的所有元素併合併到一個新數組中，接著取出要刪除元素之後的所有元素並繼續合併，從而獲得一個新的不包含要刪除元素的數組。

同樣地，在Vue中也可以使用computed屬性與slice方法實現刪除指定元素的功能，例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arrComputed" :key="index">
        {{ item }}
        <button @click="removeItem(index)">刪除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['a', 'b', 'c', 'd', 'e', 'f'],
      itemToDelete: 'c',
    };
  },
  computed: {
    arrComputed() {
      let index = this.arr.indexOf(this.itemToDelete);
      return this.arr
        .slice(0, index)
        .concat(this.arr.slice(index + 1));
    },
  },
  methods: {
    removeItem(index) {
      this.arr.splice(index, 1);
    },
  },
};
</script>

在上述代碼中，我們定義了一個要刪除的元素為c，並在computed屬性中使用slice方法取出該元素之前的所有元素和之後的所有元素併合並，從而獲得一個新的不包含元素c的數組。當用戶點擊刪除按鈕時，仍然通過splice方法刪除對應位置的元素，Vue會自動重新計算arrComputed的值並更新頁面。