vue实现checkbox单选
实现 Vue Checkbox 单选的方法
在 Vue 中实现 Checkbox 单选功能，可以通过绑定 v-model 和监听 change 事件来控制选中状态。以下是具体实现方式：
方法一：使用 v-model 和计算属性
<template>
<div>
<label v-for="option in options" :key="option.value">
<input
type="checkbox"
v-model="selectedValue"
:value="option.value"
@change="handleChange(option.value)"
/>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'A', label: 'Option A' },
{ value: 'B', label: 'Option B' },
{ value: 'C', label: 'Option C' },
],
selectedValue: [],
};
},
methods: {
handleChange(value) {
this.selectedValue = [value];
},
},
};
</script>方法二：使用单选框模拟复选框
通过 CSS 样式将单选框（radio）外观改为复选框样式：
<template>
<div>
<label v-for="option in options" :key="option.value">
<input
type="radio"
v-model="selectedValue"
:value="option.value"
class="checkbox-style"
/>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'A', label: 'Option A' },
{ value: 'B', label: 'Option B' },
{ value: 'C', label: 'Option C' },
],
selectedValue: '',
};
},
};
</script>
<style>
.checkbox-style {
appearance: checkbox;
-webkit-appearance: checkbox;
}
</style>方法三：动态绑定 checked 属性
通过比较当前选项是否等于选中值来控制选中状态：
<template>
<div>
<label v-for="option in options" :key="option.value">
<input
type="checkbox"
:checked="selectedValue === option.value"
@change="selectedValue = option.value"
/>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'A', label: 'Option A' },
{ value: 'B', label: 'Option B' },
{ value: 'C', label: 'Option C' },
],
selectedValue: '',
};
},
};
</script>注意事项
- 方法一通过
v-model绑定数组并强制设置为单选，适用于需要兼容多选改单选的场景。 - 方法二通过 CSS 修改单选框样式，更符合原生单选行为。
- 方法三直接通过
checked属性控制，逻辑简单但需要手动管理状态。
根据实际需求选择合适的方法，推荐方法二或方法三实现纯粹的复选框单选效果。
