vue实现单选互斥
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 的单选组件：
<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>注意事项
- 确保所有互斥的单选按钮绑定到同一个
v-model变量。 - 动态渲染时需为每个选项设置唯一的
key。 - 自定义组件时需正确处理
modelValue和update:modelValue事件。
以上方法均能实现单选互斥功能，可根据项目需求选择合适的方式。
