Vue.js 点击事件排他性实现 - 如何实现单选效果

在 Vue 中实现点击事件的排他可以通过以下方法：

1. 使用 v-on 指令绑定点击事件，并在事件处理程序中使用 $event 对象获取当前点击元素的信息。
2. 在 data 中定义一个变量来存储当前选中的元素的索引。
3. 在点击事件处理程序中，将当前点击元素的索引赋值给 data 中定义的变量。
4. 在模板中使用 v-bind:class 绑定样式类，并使用三元表达式来判断当前元素是否被选中。
5. 给每个元素定义一个唯一的 key，以便 Vue 可以正确地进行更新。

以下是一个示例代码：

<template>
  <div>
    <div v-for="(item, index) in items" :key="item.id"
         :class="{active: activeIndex === index}"
         @click="handleClick(index)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: -1,
      items: [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' }
      ]
    }
  },
  methods: {
    handleClick(index) {
      this.activeIndex = index;
    }
  }
}
</script>

<style>
.active {
  background-color: blue;
  color: white;
}
</style>

在上面的代码中，我们使用了 v-for 指令来遍历 items 数组，并使用 :key 来指定每个元素的唯一标识。在模板中，我们使用 v-bind:class 来绑定样式类，并使用三元表达式来判断当前元素是否被选中。在点击事件处理程序中，我们将当前点击元素的索引赋值给 activeIndex 变量。最后，我们定义了一个 .active 样式类来表示选中状态的样式。