vue3列表绑定点击事件

在 Vue 3 中，你可以使用 `v-for` 指令来循环遍历一个数组并渲染成列表，然后使用 `@click` 指令来绑定点击事件。具体步骤如下：

1. 在数据中定义一个数组，用来存储列表的数据：

data() {
  return {
    items: [
      { id: 1, name: 'item 1' },
      { id: 2, name: 'item 2' },
      { id: 3, name: 'item 3' },
    ],
  };
},

2. 在模板中使用 `v-for` 指令循环遍历数组，渲染成列表：

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

上面的代码中，我们使用 `v-for` 指令循环遍历 `items` 数组，并将每个元素渲染成一个列表项。`key` 属性用来指定每个列表项的唯一标识。

3. 在 `li` 元素上使用 `@click` 指令来绑定点击事件，并在事件处理函数中调用 `handleClick` 方法：

methods: {
  handleClick(item) {
    console.log(`clicked item ${item.id}`);
  },
},

上面的代码中，我们定义了一个 `handleClick` 方法，并在里面打印了点击的列表项的 `id`。

这样，当用户点击列表项时，就会触发 `handleClick` 方法，并将当前点击的列表项作为参数传递给方法。