vue实现radio
Vue 实现 Radio 单选按钮
在 Vue 中实现 Radio 单选按钮可以通过 v-model 绑定数据，结合原生 HTML 的 <input type="radio"> 或使用第三方组件库（如 Element UI、Vuetify 等）。以下是几种常见实现方式：
原生 HTML 实现
使用原生 <input type="radio"> 绑定 v-model，通过 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>
<p>Selected: {{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
};
}
};
</script>动态渲染选项
通过 v-for 动态渲染 Radio 选项，适用于选项数据来自后端或动态配置的场景：
<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: {{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' }
]
};
}
};
</script>使用 Element UI 的 Radio 组件
若项目中使用 Element UI，可以直接使用其封装好的 el-radio 组件：
<template>
<div>
<el-radio v-model="selectedOption" label="option1">Option 1</el-radio>
<el-radio v-model="selectedOption" label="option2">Option 2</el-radio>
<p>Selected: {{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
};
}
};
</script>自定义 Radio 组件
封装一个可复用的自定义 Radio 组件，支持灵活样式和功能扩展：
<!-- CustomRadio.vue -->
<template>
<label class="custom-radio">
<input
type="radio"
:checked="modelValue === value"
@change="$emit('update:modelValue', value)"
/>
<span class="radio-label">{{ label }}</span>
</label>
</template>
<script>
export default {
props: {
modelValue: { type: [String, Number], required: true },
value: { type: [String, Number], required: true },
label: { type: String, required: true }
}
};
</script>
<style scoped>
.custom-radio {
display: inline-flex;
align-items: center;
cursor: pointer;
}
</style>使用时通过 v-model 绑定数据：
<template>
<div>
<CustomRadio
v-model="selectedOption"
value="red"
label="Red"
/>
<CustomRadio
v-model="selectedOption"
value="blue"
label="Blue"
/>
</div>
</template>
<script>
import CustomRadio from './CustomRadio.vue';
export default {
components: { CustomRadio },
data() {
return {
selectedOption: ''
};
}
};
</script>注意事项
v-model绑定：确保绑定的数据是响应式的（在data中声明）。- 值类型：Radio 的
value可以是字符串、数字或布尔值，需与v-model绑定的数据类型一致。 - 样式兼容性：原生 Radio 的默认样式可能不美观，可通过 CSS 隐藏原生控件并自定义外观（如伪元素模拟选中状态）。
