Vue数组删除某个元素|极客教程

Vue数组删除某个元素

在Vue中，我们经常需要操作数组，例如在列表中删除某个元素。本文将详细介绍如何在Vue中删除数组中的某个元素，并且给出示例代码及运行结果。

使用Vue的splice方法删除数组中的元素

Vue中提供了splice方法，可以用来删除数组中的元素。splice方法可以接受两个参数：要删除的元素的起始位置和要删除的个数。

下面是一个示例代码：

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

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'cherry']
    }
  },
  methods: {
    deleteItem(index) {
      this.items.splice(index, 1);
    }
  }
}
</script>

在上面的代码中，我们使用v-for指令遍历数组items，并且为每个元素添加了一个删除按钮。当点击删除按钮时，会调用deleteItem方法，利用splice方法删除对应位置的元素。

下面是示例代码的运行效果：

apple
删除
banana
删除
cherry
删除

使用Vue的filter方法删除数组中的元素

除了使用splice方法，我们还可以使用Vue的filter方法来删除数组中的元素。filter方法会返回一个新数组，新数组中会过滤掉我们不需要的元素。

下面是一个示例代码：

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

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'cherry']
    }
  },
  methods: {
    deleteItem(item) {
      this.items = this.items.filter(i => i !== item);
    }
  }
}
</script>

在上面的代码中，我们同样使用v-for指令遍历数组items，并且给每个元素添加了一个删除按钮。当点击删除按钮时，会调用deleteItem方法，利用filter方法过滤掉对应的元素。

下面是示例代码的运行效果：