vue3 for循环如何点击获取当前dom元素

在 Vue3 中，可以使用 `ref` 创建一个引用，然后将其绑定到需要获取 DOM 元素的元素上。然后，在点击事件中，可以使用 `event.target` 获取当前点击的 DOM 元素。

示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" ref="items" @click="handleClick">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const list = ref([
      { id: 1, name: 'item 1' },
      { id: 2, name: 'item 2' },
      { id: 3, name: 'item 3' },
    ]);

    const handleClick = (event) => {
      const item = event.target; // 当前点击的 DOM 元素
      console.log(item);
    };

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

在上面的示例中，我们通过 `ref` 给每个 `li` 元素创建了一个引用 `items`，然后在点击事件中使用 `event.target` 获取当前点击的 DOM 元素，并在控制台中输出。