当前位置：首页 > VUE

vue实现单选互斥

2026-02-20 00:13:19VUE

Vue 实现单选互斥的方法

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

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

通过将多个单选按钮（<input type="radio">）绑定到同一个响应式变量，Vue 会自动处理互斥逻辑：

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

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

使用 `v-for` 动态渲染选项

如果选项是动态生成的，可以通过 v-for 简化代码：

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="radio" v-model="selectedOption" :value="option.value" />
      {{ option.label }}
    </label>
  </div>
</template>

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

自定义组件实现互斥

封装一个可复用的单选组组件：

<template>
  <div>
    <RadioGroup v-model="selectedOption" :options="options" />
  </div>
</template>

<script>
import RadioGroup from './RadioGroup.vue'

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

在 RadioGroup.vue 中：

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input
        type="radio"
        :value="option.value"
        :checked="modelValue === option.value"
        @change="$emit('update:modelValue', option.value)"
      />
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: { type: String, default: '' },
    options: { type: Array, required: true }
  }
}
</script>

使用第三方库

对于复杂场景，可以使用第三方库如 vue-radio 或 element-ui 的单选组件：

vue实现单选互斥

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio v-for="option in options" :key="option.value" :label="option.value">
      {{ option.label }}
    </el-radio>
  </el-radio-group>
</template>