vue 实现组单选
Vue 实现单选组
在Vue中实现单选组可以通过多种方式完成，以下是几种常见的方法：
使用原生HTML单选按钮结合v-model
通过v-model绑定同一个变量实现单选效果，选中时变量值为对应单选按钮的value值。
<template>
<div>
<input type="radio" id="option1" value="1" v-model="selectedOption">
<label for="option1">选项1</label>
<input type="radio" id="option2" value="2" v-model="selectedOption">
<label for="option2">选项2</label>
<input type="radio" id="option3" value="3" v-model="selectedOption">
<label for="option3">选项3</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
}
}
}
</script>使用组件库的单选组
如Element UI、Ant Design Vue等组件库提供现成的单选组组件。
<template>
<el-radio-group v-model="selectedOption">
<el-radio label="1">选项1</el-radio>
<el-radio label="2">选项2</el-radio>
<el-radio label="3">选项3</el-radio>
</el-radio-group>
</template>自定义单选组组件
封装可复用的单选组组件，通过v-model实现双向绑定。
<template>
<div class="radio-group">
<div
v-for="option in options"
:key="option.value"
class="radio-option"
:class="{ 'active': modelValue === option.value }"
@click="$emit('update:modelValue', option.value)"
>
{{ option.label }}
</div>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
required: true
},
modelValue: {
type: [String, Number],
required: true
}
},
emits: ['update:modelValue']
}
</script>
<style>
.radio-option {
padding: 8px 16px;
border: 1px solid #ddd;
cursor: pointer;
}
.radio-option.active {
background-color: #409eff;
color: white;
}
</style>使用计算属性处理单选逻辑
当需要处理更复杂的单选逻辑时，可以结合计算属性实现。
<template>
<div>
<div
v-for="item in items"
:key="item.id"
@click="selectItem(item)"
:class="{ 'selected': selectedItemId === item.id }"
>
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '选项A' },
{ id: 2, name: '选项B' },
{ id: 3, name: '选项C' }
],
selectedItemId: null
}
},
methods: {
selectItem(item) {
this.selectedItemId = item.id
}
}
}
</script>以上方法均可实现单选功能，根据项目需求选择合适的实现方式。组件库提供的单选组通常包含更多样式和功能，适合快速开发；自定义组件则更灵活，可根据具体需求定制。
