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

在 Vue3 中，你可以使用 `ref` 来获取当前 DOM 元素，并使用 `v-for` 遍历数据。以下是一个示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="handleClick(index)" :ref="`item-${index}`">{{ item }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const list = ref(['apple', 'banana', 'orange']);

    const handleClick = (index) => {
      const el = document.querySelector(`[ref="item-${index}"]`);
      console.log(el); // 当前点击的 DOM 元素
    };

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

在模板中使用 `v-for` 遍历数据，并将每个 DOM 元素的 `ref` 属性设置为 `item-${index}`，其中 `index` 是当前元素在数组中的索引。然后，在点击事件中使用 `document.querySelector` 方法来获取当前点击的 DOM 元素。