vue3在批量删除时怎么获取以点击的id

在 Vue3 中，可以通过在模板中绑定事件处理函数，并传递当前元素的 id 来获取点击的 id。具体实现方式如下：

1. 在模板中绑定事件处理函数，例如：

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

2. 在 Vue3 实例中定义事件处理函数，例如：

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
      ]
    })

    const deleteItem = (id) => {
      // 在这里可以获取到点击的 id
      console.log(id)

      // 在这里可以根据点击的 id 删除对应的数据
      state.items = state.items.filter(item => item.id !== id)
    }

    return {
      items: state.items,
      deleteItem
    }
  }
}
</script>

在这个例子中，点击删除按钮时，会调用 deleteItem 函数，传入当前元素的 id，从而实现批量删除的功能。