当前位置：首页 > VUE

vue排他思想实现

2026-01-14 01:39:00VUE

Vue 排他思想实现方法

排他思想指的是在多个元素中，只允许一个元素处于激活状态，其余元素保持默认状态。以下是几种常见的实现方式：

使用 v-for 和 v-if 结合

通过遍历数据数组，结合当前选中项的索引实现排他效果。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      @click="selectItem(index)"
      :class="{ active: selectedIndex === index }"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      selectedIndex: -1
    }
  },
  methods: {
    selectItem(index) {
      this.selectedIndex = index
    }
  }
}
</script>

使用对象存储状态

为每个元素维护一个独立的状态对象，通过切换布尔值实现排他效果。

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

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', isActive: false },
        { name: 'Item 2', isActive: false },
        { name: 'Item 3', isActive: false }
      ]
    }
  },
  methods: {
    toggleActive(index) {
      this.items.forEach((item, i) => {
        item.isActive = i === index
      })
    }
  }
}
</script>

使用计算属性优化

通过计算属性动态生成激活状态，减少模板中的逻辑判断。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      @click="selectedItem = item"
      :class="{ active: isActive(item) }"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      selectedItem: null
    }
  },
  computed: {
    isActive() {
      return (item) => this.selectedItem === item
    }
  }
}
</script>

使用 Vuex 管理状态

在大型应用中，通过 Vuex 集中管理激活状态，确保状态的一致性。

// store.js
export default new Vuex.Store({
  state: {
    activeItem: null
  },
  mutations: {
    setActiveItem(state, item) {
      state.activeItem = item
    }
  }
})

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      @click="$store.commit('setActiveItem', item)"
      :class="{ active: $store.state.activeItem === item }"
    >
      {{ item }}
    </div>
  </div>
</template>