vue 实现单选功能
实现单选功能的几种方法
在Vue中实现单选功能可以通过多种方式完成，以下是常见的几种方法：
使用原生HTML单选按钮
通过v-model绑定数据，利用原生<input type="radio">实现单选：
<template>
<div>
<input type="radio" id="option1" value="option1" v-model="selectedOption">
<label for="option1">选项1</label>
<input type="radio" id="option2" value="option2" v-model="selectedOption">
<label for="option2">选项2</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
}
}
}
</script>使用Vue组件库的单选组件
如Element UI的el-radio组件：
<template>
<el-radio-group v-model="selectedOption">
<el-radio label="option1">选项1</el-radio>
<el-radio label="option2">选项2</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
}
}
}
</script>自定义单选组件
通过动态样式和事件处理实现自定义外观的单选功能：
<template>
<div class="custom-radio">
<div
v-for="option in options"
:key="option.value"
class="radio-item"
:class="{ 'active': selectedOption === option.value }"
@click="selectedOption = option.value"
>
{{ option.label }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' }
]
}
}
}
</script>
<style>
.radio-item {
padding: 8px 12px;
border: 1px solid #ddd;
cursor: pointer;
}
.radio-item.active {
background-color: #409eff;
color: white;
}
</style>使用计算属性处理单选逻辑
当需要根据单选结果执行复杂逻辑时：
<template>
<div>
<input type="radio" v-model="selectedOption" value="A">选项A
<input type="radio" v-model="selectedOption" value="B">选项B
<p>{{ result }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
}
},
computed: {
result() {
return this.selectedOption === 'A' ? '选择了A' : '选择了B'
}
}
}
</script>注意事项
- 确保单选组的
v-model绑定到同一个数据属性 - 单选按钮的
value属性应该唯一且有意义 - 移动端开发时考虑添加适当的触摸反馈样式
- 表单提交时需要验证是否已选择选项
以上方法可以根据具体项目需求选择使用，组件库方案适合快速开发，自定义方案适合需要特殊样式的场景。
