vue 实现组单选
Vue 实现单选组
在 Vue 中实现单选组可以通过多种方式，以下是几种常见的实现方法：
使用 v-model 绑定单选按钮组
通过 v-model 绑定一个变量，单选按钮的 value 属性对应不同的值。当用户选择某个选项时，绑定的变量会自动更新为对应 value。
<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>
<p>Selected option: {{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
};
}
};
</script>使用动态渲染选项
如果选项是动态生成的，可以通过 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>
<p>Selected option: {{ selectedOption }}</p>
</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>
<label v-for="option in options" :key="option.value">
<input
type="radio"
:value="option.value"
:checked="option.value === modelValue"
@change="$emit('update:modelValue', option.value)"
/>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
required: true
},
modelValue: {
type: String,
required: true
}
},
emits: ['update:modelValue']
};
</script>在父组件中使用自定义单选组
<template>
<div>
<RadioGroup
v-model="selectedOption"
:options="options"
/>
<p>Selected option: {{ selectedOption }}</p>
</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' },
{ value: 'option3', label: 'Option 3' }
]
};
}
};
</script>注意事项
- 确保每个单选按钮的
value唯一，避免冲突。 - 使用
v-model时，绑定的变量初始值应为空字符串或默认选项的value。 - 动态渲染选项时，确保
v-for的key唯一且稳定。
以上方法可以灵活实现 Vue 中的单选组功能，适用于不同场景需求。
