vue如何实现单选功能
使用原生HTML单选按钮
在Vue中可以直接使用HTML原生的<input type="radio">元素实现单选功能。通过v-model实现数据绑定：
<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组件库的单选按钮
主流UI库如Element UI、Ant Design Vue等都提供了单选组件：
<!-- Element UI -->
<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>
<!-- Ant Design Vue -->
<template>
<a-radio-group v-model="selectedOption">
<a-radio value="option1">选项1</a-radio>
<a-radio value="option2">选项2</a-radio>
</a-radio-group>
</template>自定义单选组件
可以创建可重用的单选组件：
<!-- RadioButton.vue -->
<template>
<label class="radio-button">
<input
type="radio"
:value="value"
v-model="modelValue"
@change="$emit('update:modelValue', value)"
>
<span>{{ label }}</span>
</label>
</template>
<script>
export default {
props: {
value: {
type: String,
required: true
},
label: {
type: String,
required: true
},
modelValue: {
type: String,
default: ''
}
}
}
</script>
<!-- 使用方式 -->
<template>
<RadioButton
v-model="selectedOption"
value="option1"
label="选项1"
/>
<RadioButton
v-model="selectedOption"
value="option2"
label="选项2"
/>
</template>动态生成单选选项
当选项数据来自API或需要动态生成时：
<template>
<div v-for="option in options" :key="option.value">
<input
type="radio"
:id="option.value"
:value="option.value"
v-model="selectedOption"
>
<label :for="option.value">{{ option.label }}</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'opt1', label: '选项1' },
{ value: 'opt2', label: '选项2' }
]
}
}
}
</script>处理单选事件
可以通过@change事件监听选择变化：
<template>
<input
type="radio"
value="option1"
v-model="selectedOption"
@change="handleChange"
>
</template>
<script>
export default {
methods: {
handleChange(event) {
console.log('选中值:', event.target.value)
}
}
}
</script>
