当前位置：首页 > VUE

vue中实现排它

2026-01-20 19:19:42VUE

Vue 中实现排他操作的方法

在 Vue 中实现排他操作（即多个元素中只能有一个被选中或激活）可以通过以下几种方式实现：

使用 v-model 和计算属性

通过绑定一个变量，结合计算属性或方法来控制排他逻辑：

vue中实现排它

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

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

使用 v-model 和单选框组

对于表单元素，可以直接使用 v-model 绑定到同一个变量：

vue中实现排它

<template>
  <div>
    <input type="radio" id="option1" value="1" v-model="selectedOption">
    <label for="option1">选项1</label>

    <input type="radio" id="option2" value="2" v-model="selectedOption">
    <label for="option2">选项2</label>

    <input type="radio" id="option3" value="3" v-model="selectedOption">
    <label for="option3">选项3</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null
    }
  }
}
</script>

使用 Vuex 管理状态

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

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

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

使用动态组件实现标签页排他

实现标签页切换等场景：

<template>
  <div>
    <button 
      v-for="tab in tabs"
      :key="tab.name"
      @click="currentTab = tab"
      :class="{ active: currentTab === tab }"
    >
      {{ tab.name }}
    </button>
    <component :is="currentTab.component" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: null,
      tabs: [
        { name: '标签1', component: 'Tab1' },
        { name: '标签2', component: 'Tab2' }
      ]
    }
  },
  created() {
    this.currentTab = this.tabs[0]
  }
}
</script>

这些方法都能实现 Vue 中的排他效果，选择哪种取决于具体场景和项目复杂度。简单交互使用数据绑定即可，复杂状态管理建议使用 Vuex。

标签: vue