当前位置：首页 > VUE

vue排他思想实现

2026-02-10 18:19:22VUE

Vue 排他思想实现

排他思想指的是在一组元素中，仅允许一个元素处于激活状态，其他元素自动取消激活。以下是几种常见的实现方法：

使用 v-for 和 v-model

通过 v-model 绑定一个变量，结合 v-for 动态生成元素，点击时更新绑定的变量。

vue排他思想实现

<template>
  <div>
    <button 
      v-for="item in items" 
      :key="item.id" 
      @click="selectedItem = item.id"
      :class="{ active: selectedItem === item.id }"
    >
      {{ item.name }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItem: null
    }
  }
}
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用计算属性

通过计算属性动态判断当前选中项，避免直接操作 DOM。

vue排他思想实现

<template>
  <div>
    <button 
      v-for="item in items" 
      :key="item.id" 
      @click="toggleActive(item.id)"
      :class="{ active: isActive(item.id) }"
    >
      {{ item.name }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      activeItem: null
    }
  },
  methods: {
    toggleActive(id) {
      this.activeItem = id
    },
    isActive(id) {
      return this.activeItem === id
    }
  }
}
</script>

使用事件总线或 Vuex

对于跨组件排他操作，可以通过事件总线或 Vuex 管理全局状态。

// 使用事件总线
import Vue from 'vue'
const EventBus = new Vue()

// 组件A
EventBus.$emit('set-active', itemId)

// 组件B
EventBus.$on('set-active', (id) => {
  this.activeItem = id
})

动态样式绑定

通过 :class 或 :style 动态切换样式，实现视觉排他效果。

<button 
  v-for="item in items" 
  :key="item.id" 
  @click="selectedItem = item.id"
  :style="{ 
    backgroundColor: selectedItem === item.id ? '#42b983' : '', 
    color: selectedItem === item.id ? 'white' : '' 
  }"
>
  {{ item.name }}
</button>

以上方法均能实现排他效果，选择取决于具体场景和项目复杂度。