vue点击事件怎么排他

在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样式类来表示选中状态的样式。