在vue3中 点击时获取ul 中li 中的唯一标识

在Vue 3中，你可以使用`@click`指令和事件代理来监听`<li>`元素的点击事件，然后通过事件对象`event.target`来获取被点击的具体`<li>`元素的信息。如果`<li>`元素上有唯一标识的属性，比如`id`或者`data-*`属性，你可以通过`getAttribute`方法来获取它的值。

下面是一个示例代码：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  methods: {
    handleClick(event) {
      const li = event.target.closest('li')
      if (li) {
        const id = li.getAttribute('data-id')
        console.log(`Clicked on item ${id}`)
      }
    }
  }
}
</script>

在上面的代码中，我们给每个`<li>`元素添加了一个`data-id`属性，并把它绑定到`item.id`上。当用户点击`<li>`元素时，我们会先通过`event.target`获取被点击的元素，然后使用`closest`方法找到最近的`<li>`元素。最后，我们可以通过`getAttribute`方法获取`data-id`属性的值，即当前点击的`<li>`元素的唯一标识。