当前位置：首页 > VUE

vue排他思想实现

2026-03-07 18:08:39VUE

排他思想的基本概念

排他思想指在交互中，同一时间只有一个元素保持激活状态（如选项卡、菜单项）。Vue 可通过数据驱动和条件渲染高效实现这一逻辑。

实现方法一：v-if 与动态数据

通过 v-if 或 v-show 控制显示，结合数据状态管理当前选中项：

vue排他思想实现

<template>
  <div>
    <button @click="activeTab = 'tab1'">Tab 1</button>
    <button @click="activeTab = 'tab2'">Tab 2</button>

    <div v-if="activeTab === 'tab1'">Content 1</div>
    <div v-if="activeTab === 'tab2'">Content 2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    };
  }
};
</script>

实现方法二：列表渲染与索引

处理动态列表时，通过索引或唯一标识对比当前选中项：

vue排他思想实现

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

    <div v-if="currentIndex !== null">
      {{ items[currentIndex].content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', content: 'Content 1' },
        { name: 'Item 2', content: 'Content 2' }
      ],
      currentIndex: 0
    };
  }
};
</script>

实现方法三：组件化封装

将逻辑封装为可复用组件，通过 props 和 emit 传递状态：

<!-- Tabs.vue -->
<template>
  <div>
    <slot :activeTab="activeTab" :setActiveTab="setActiveTab"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: null
    };
  },
  methods: {
    setActiveTab(tab) {
      this.activeTab = tab;
    }
  }
};
</script>

父组件调用示例：

<template>
  <Tabs>
    <template #default="{ activeTab, setActiveTab }">
      <button @click="setActiveTab('tab1')">Tab 1</button>
      <button @click="setActiveTab('tab2')">Tab 2</button>
      <div v-if="activeTab === 'tab1'">Content 1</div>
      <div v-if="activeTab === 'tab2'">Content 2</div>
    </template>
  </Tabs>
</template>