vue3 删除数组中的元素

在 Vue3 中，可以使用 JavaScript 中的 Array.prototype.splice() 方法来删除数组中的元素。splice() 方法接受两个参数，第一个参数是要删除的元素的起始索引，第二个参数是要删除的元素的个数。

下面是一个示例代码，演示如何在 Vue3 中删除数组中的元素：

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    const list = ref(['A', 'B', 'C', 'D']);

    const deleteItem = (index) => {
      list.value.splice(index, 1);
    };

    return {
      list,
      deleteItem,
    };
  },
};
</script>

在上面的代码中，我们使用 ref() 函数创建了一个响应式的 list 数组。然后，我们定义了一个 deleteItem 方法，该方法接受一个索引参数 index，使用 splice() 方法删除该索引对应的元素。

在模板中，我们使用 v-for 指令遍历 list 数组，并为每个元素显示一个删除按钮。当点击删除按钮时，会调用 deleteItem 方法，并传入当前元素的索引作为参数，然后删除该元素。

这样，当点击删除按钮时，对应的元素就会从数组中删除