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的值并更新页面。