当前位置：首页 > VUE

vue 中实现互斥选中

2026-01-20 21:34:51VUE

实现互斥选中的方法

在Vue中实现互斥选中（即单选效果）可以通过多种方式完成，以下是几种常见的方法：

使用v-model绑定同一个变量

通过将多个选项的v-model绑定到同一个变量，Vue会自动处理互斥逻辑。当选中一个选项时，其他选项会自动取消选中。

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption">
    <label for="option1">Option 1</label>
    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">Option 2</label>
    <input type="radio" id="option3" value="option3" v-model="selectedOption">
    <label for="option3">Option 3</label>
  </div>
</template>

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

使用计算属性和方法

对于非radio元素（如按钮或自定义组件），可以通过计算属性和方法手动实现互斥逻辑。

<template>
  <div>
    <button 
      v-for="option in options" 
      :key="option.value"
      :class="{ active: selectedOption === option.value }"
      @click="selectOption(option.value)"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ],
      selectedOption: ''
    }
  },
  methods: {
    selectOption(value) {
      this.selectedOption = value
    }
  }
}
</script>

使用Vuex或Pinia管理状态

在大型应用中，可以使用状态管理工具（如Vuex或Pinia）集中管理选中状态。

// store.js (Vuex示例)
import { createStore } from 'vuex'

export default createStore({
  state: {
    selectedOption: ''
  },
  mutations: {
    setSelectedOption(state, value) {
      state.selectedOption = value
    }
  }
})

<template>
  <div>
    <button 
      v-for="option in options" 
      :key="option.value"
      :class="{ active: $store.state.selectedOption === option.value }"
      @click="$store.commit('setSelectedOption', option.value)"
    >
      {{ option.label }}
    </button>
  </div>
</template>

使用自定义指令

可以创建自定义指令来处理互斥选中逻辑，适用于需要复用的场景。

vue 中实现互斥选中

// main.js
app.directive('mutex', {
  mounted(el, binding, vnode) {
    el.addEventListener('click', () => {
      const group = binding.arg || 'default'
      const value = binding.value
      vnode.context.selectedOptions = { ...vnode.context.selectedOptions, [group]: value }
    })
  }
})

<template>
  <div>
    <button v-mutex:group1="'option1'" :class="{ active: selectedOptions.group1 === 'option1' }">Option 1</button>
    <button v-mutex:group1="'option2'" :class="{ active: selectedOptions.group1 === 'option2' }">Option 2</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: {
        group1: ''
      }
    }
  }
}
</script>

以上方法均可实现互斥选中效果，选择哪种方式取决于具体场景和项目需求。对于简单场景，直接使用v-model最为简便；对于复杂场景，可能需要结合状态管理或自定义指令。