vue 实现单选
Vue 实现单选功能的方法
在 Vue 中实现单选功能可以通过多种方式完成，以下是几种常见的实现方法：
使用 v-model 绑定单选按钮
通过 v-model 绑定一个变量到单选按钮组，确保同一组单选按钮的 name 属性相同：
<template>
<div>
<input type="radio" id="option1" value="option1" v-model="selectedOption" name="options">
<label for="option1">Option 1</label>
<input type="radio" id="option2" value="option2" v-model="selectedOption" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option3" value="option3" v-model="selectedOption" name="options">
<label for="option3">Option 3</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
}
}
}
</script>使用 Vue 组件库的单选组件
许多 Vue UI 库（如 Element UI、Vuetify）提供了封装好的单选组件，例如：
<template>
<el-radio-group v-model="selectedOption">
<el-radio label="option1">Option 1</el-radio>
<el-radio label="option2">Option 2</el-radio>
<el-radio label="option3">Option 3</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
}
}
}
</script>动态生成单选按钮
通过 v-for 动态生成单选按钮：
<template>
<div>
<div v-for="option in options" :key="option.value">
<input
type="radio"
:id="option.value"
:value="option.value"
v-model="selectedOption"
name="dynamicOptions"
>
<label :for="option.value">{{ option.label }}</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'opt1', label: 'Option 1' },
{ value: 'opt2', label: 'Option 2' },
{ value: 'opt3', label: 'Option 3' }
]
}
}
}
</script>注意事项
- 确保同一组单选按钮的
name属性相同，否则浏览器会允许同时选择多个选项。 - 如果需要默认选中某个选项，可以在
data中初始化selectedOption为对应的值。 - 对于复杂场景，可以结合计算属性或
watch监听选项变化。
以上方法均能实现 Vue 中的单选功能，具体选择取决于项目需求和技术栈。
