vue实现checkbox单选
实现 Checkbox 单选的方法
在 Vue 中实现 Checkbox 的单选效果可以通过以下方式完成：
使用 v-model 绑定单个变量
通过将多个 Checkbox 绑定到同一个变量，并设置不同的值，可以实现单选效果。当用户选择其中一个 Checkbox 时，变量的值会更新为当前选中的值，其他 Checkbox 会自动取消选中。
<template>
<div>
<label>
<input type="checkbox" v-model="selectedOption" value="option1">
Option 1
</label>
<label>
<input type="checkbox" v-model="selectedOption" value="option2">
Option 2
</label>
<label>
<input type="checkbox" v-model="selectedOption" value="option3">
Option 3
</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
};
}
};
</script>使用计算属性和自定义方法
如果需要更复杂的逻辑控制，可以通过计算属性和自定义方法实现单选效果。
<template>
<div>
<label v-for="option in options" :key="option.value">
<input
type="checkbox"
:checked="selectedOption === option.value"
@change="handleChange(option.value)"
>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
],
selectedOption: ''
};
},
methods: {
handleChange(value) {
this.selectedOption = value;
}
}
};
</script>使用 v-for 动态渲染选项
如果需要动态渲染选项，可以使用 v-for 循环遍历选项列表，并结合 v-model 实现单选。
<template>
<div>
<label v-for="option in options" :key="option.value">
<input
type="checkbox"
v-model="selectedOption"
:value="option.value"
>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
],
selectedOption: ''
};
}
};
</script>使用 radio 替代 checkbox
如果目标是实现单选效果，可以考虑直接使用 radio 按钮，因为它的设计初衷就是单选。
<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>
<label>
<input type="radio" v-model="selectedOption" value="option3">
Option 3
</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: ''
};
}
};
</script>注意事项
- 使用
checkbox实现单选时，需要确保v-model绑定的变量是单一值，而不是数组。 - 如果用户需要取消选中，可能需要额外逻辑处理。
- 对于纯粹的单选场景，建议优先使用
radio按钮。
