vue实现排他思想

排他思想的实现方式

在Vue中实现排他思想（即多个元素中只能有一个被选中或激活）可以通过多种方式完成。以下是几种常见的实现方法：

使用v-model和计算属性

通过v-model绑定一个变量，结合计算属性或方法实现排他效果。例如，实现选项卡切换：

<template>
  <div>
    <button 
      v-for="tab in tabs" 
      :key="tab" 
      @click="currentTab = tab"
      :class="{ active: currentTab === tab }"
    >
      {{ tab }}
    </button>
    <div v-show="currentTab === 'Tab1'">Content 1</div>
    <div v-show="currentTab === 'Tab2'">Content 2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Tab1', 'Tab2'],
      currentTab: 'Tab1'
    }
  }
}
</script>

使用v-if和事件处理

通过v-if条件渲染和事件处理函数实现排他显示：

<template>
  <div>
    <button @click="showComponentA = true; showComponentB = false">Show A</button>
    <button @click="showComponentA = false; showComponentB = true">Show B</button>
    <ComponentA v-if="showComponentA" />
    <ComponentB v-if="showComponentB" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showComponentA: true,
      showComponentB: false
    }
  }
}
</script>

使用动态组件

Vue的<component :is="">语法配合排他逻辑更简洁：

<template>
  <div>
    <button 
      v-for="comp in components" 
      :key="comp" 
      @click="currentComponent = comp"
    >
      {{ comp }}
    </button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: ['ComponentA', 'ComponentB'],
      currentComponent: 'ComponentA'
    }
  }
}
</script>

使用数组索引实现单选

对于列表项的单选效果，可以通过维护选中索引实现：

<template>
  <ul>
    <li 
      v-for="(item, index) in items" 
      :key="item.id"
      @click="selectedIndex = index"
      :class="{ selected: selectedIndex === index }"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ],
      selectedIndex: -1
    }
  }
}
</script>

使用Vuex管理状态

对于复杂应用，可以使用Vuex集中管理排他状态：

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

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

性能优化建议

对于长列表的排他选择，避免使用深层响应式数据，可以考虑以下优化：

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="selectItem(item.id)"
      :class="{ active: activeId === item.id }"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array(1000).fill().map((_, i) => ({ id: i, text: `Item ${i}` })),
      activeId: null
    }
  },
  methods: {
    selectItem(id) {
      this.activeId = id
    }
  }
}
</script>

以上方法根据具体场景选择，简单交互使用组件内状态即可，复杂应用建议使用状态管理工具。