当前位置：首页 > VUE

vue实现选项互斥互斥

2026-02-24 07:41:51VUE

Vue 实现选项互斥的方法

在 Vue 中实现选项互斥（即多个选项中只能选择一个）可以通过多种方式实现，以下是几种常见的方法：

使用 v-model 和计算属性

通过 v-model 绑定同一个变量，结合计算属性或监听器确保互斥逻辑：

<template>
  <div>
    <input type="checkbox" v-model="selectedOption" value="option1" @change="handleChange('option1')">
    <label>Option 1</label>
    <input type="checkbox" v-model="selectedOption" value="option2" @change="handleChange('option2')">
    <label>Option 2</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null
    }
  },
  methods: {
    handleChange(option) {
      if (this.selectedOption === option) {
        this.selectedOption = null;
      } else {
        this.selectedOption = option;
      }
    }
  }
}
</script>

使用单选按钮（radio）

直接使用 radio 输入类型，天然支持互斥：

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

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

使用自定义组件

封装一个支持互斥逻辑的组件，适用于复杂场景：

<template>
  <div>
    <mutually-exclusive-option 
      v-for="option in options"
      :key="option.value"
      :option="option"
      :selected="selectedOption"
      @select="selectedOption = $event"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null,
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ]
    }
  }
}
</script>

使用 Vuex 或状态管理

在大型应用中，可以通过 Vuex 管理互斥状态：

// store.js
export default new Vuex.Store({
  state: {
    selectedOption: null
  },
  mutations: {
    setSelectedOption(state, option) {
      state.selectedOption = option;
    }
  }
});

<template>
  <div>
    <input 
      type="checkbox" 
      :checked="selectedOption === 'option1'"
      @change="$store.commit('setSelectedOption', 'option1')"
    >
    <label>Option 1</label>
    <input 
      type="checkbox" 
      :checked="selectedOption === 'option2'"
      @change="$store.commit('setSelectedOption', 'option2')"
    >
    <label>Option 2</label>
  </div>
</template>

<script>
export default {
  computed: {
    selectedOption() {
      return this.$store.state.selectedOption;
    }
  }
}
</script>