Vue.js中复选框主要有单选和多选两种类型，单选复选框通过v-model绑定布尔值，选中时值为true，未选中为false，常用于独立选项的开关控制，如“记住密码”功能，多选复选框则通过v-model绑定数组，每个复选框的value会动态添加或移除数组元素，适用于多选场景，如标签选择、权限配置等，两者均基于Vue的数据双向绑定机制，通过v-model简化数据同步，开发者无需手动处理事件监听，只需关注数据状态即可实现交互逻辑，灵活适配不同业务需求。
Vue.js 两种类型复选框的使用与实现详解
在 Vue.js 开发中，复选框（Checkbox）是表单交互中不可或缺的组件，主要用于实现多选或单选布尔值功能，根据使用场景的不同，Vue.js 中的复选框主要分为两种类型：单个复选框（布尔绑定）和多个复选框（数组绑定），本文将详细介绍这两种类型复选框的用法、实现原理及注意事项，帮助开发者灵活应对实际开发需求。
单个复选框：布尔值绑定
单个复选框是最基础的复选框类型,通常用于表示"是/否"、"同意/不同意"等二元状态，其核心是与一个布尔值（Boolean）变量进行双向绑定，当选中复选框时，绑定的变量值为 true；取消选中时，变量值为 false。
基础用法
单个复选框通过 v-model 指令直接绑定一个布尔值变量，无需额外处理，以下是一个简单的示例：
<template>
<div>
<label>
<input type="checkbox" v-model="isChecked" />
是否同意用户协议
</label>
<p>当前状态：{{ isChecked ? '已同意' : '未同意' }}</p>
</div>
</template>
<script>
export default {
data() {
return {
isChecked: false // 初始值为 false，表示未选中
}
}
}
</script>
说明：
v-model="isChecked"实现了复选框选中状态与isChecked变量的双向绑定。- 当用户点击复选框时,
isChecked会自动更新为true或false，页面中的状态文本也会随之改变。
扩展场景：结合表单提交
单个复选框常用于表单中的"同意条款"、"记住登录状态"等场景，以下是一个表单提交的示例：
<template>
<div>
<form @submit.prevent="handleSubmit">
<label>
<input type="checkbox" v-model="rememberMe" />
记住我
</label>
<button type="submit">提交</button>
</form>
<p v-if="submitMessage" style="color: green;">{{ submitMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
rememberMe: false,
submitMessage: ''
}
},
methods: {
handleSubmit() {
if (this.rememberMe) {
this.submitMessage = '提交成功！已记住登录状态。'
} else {
this.submitMessage = '提交成功！未记住登录状态。'
}
}
}
}
</script>
说明：
- 通过
@submit.prevent阻止表单默认提交行为，转而执行自定义的handleSubmit方法。 - 根据
rememberMe的布尔值，判断是否"记住登录状态"并给出提示。
高级应用：自定义样式与行为
在实际项目中,我们经常需要自定义复选框的样式和行为，以下是一个带有自定义样式的示例：
<template>
<div class="custom-checkbox-container">
<label class="custom-checkbox">
<input type="checkbox" v-model="customChecked" />
<span class="checkmark"></span>
自定义样式复选框
</label>
<p>状态：{{ customChecked ? '已选中' : '未选中' }}</p>
</div>
</template>
<style>
.custom-checkbox {
display: inline-block;
position: relative;
padding-left: 35px;
cursor: pointer;
user-select: none;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 4px;
transition: all 0.3s ease;
}
.custom-checkbox:hover input ~ .checkmark {
background-color: #ccc;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
</style>
<script>
export default {
data() {
return {
customChecked: false
}
}
}
</script>
多个复选框：数组绑定
多个复选框常用于实现"多选"功能，例如选择兴趣爱好、标签、权限等场景，其核心是将多个复选框绑定到一个数组（Array）变量中，每个复选框的 value 值会被添加到数组（选中时）或从数组中移除（取消选中时）。
基础用法
多个复选框需要共享同一个数组变量,每个复选框的 value 值作为数组元素，示例代码如下：
<template>
<div>
<p>选择你的兴趣爱好：</p>
<label>
<input type="checkbox" v-model="hobbies" value="reading" />
阅读
</label>
<label>
<input type="checkbox" v-model="hobbies" value="sports" />
运动
</label>
<label>
<input type="checkbox" v-model="hobbies" value="music" />
音乐
</label>
<p>已选爱好：{{ hobbies.join(', ') || '无' }}</p>
</div>
</template>
<script>
export default {
data() {
return {
hobbies: [] // 初始化为空数组，表示未选中任何选项
}
}
}
</script>
说明：
v-model="hobbies"将所有复选框绑定到同一个数组hobbies。- 当用户选中"阅读"时，
hobbies数组会添加"reading"；取消选中时，会移除"reading"。 - 最终通过
hobbies.join(', ')将数组转换为逗号分隔的字符串展示。
动态渲染复选框组
在实际开发中,复选框选项通常来自动态数据（如 API 请求、配置文件等），此时可通过 v-for 动态渲染复选框组：
<template>
<div>
<p>选择你的技能：</p>
<label v-for="skill in skillList" :key="skill.value">
<input
type="checkbox"
v-model="selectedSkills"
:value="skill.value"
/>
{{ skill.label }}
</label>
<p>已选技能：{{ selectedSkills.join(', ') || '无' }}</p>
</div>
</template>
<script>
export default {
data() {
return {
skillList: [
{ label: 'JavaScript', value: 'js' },
{ label: 'Vue.js', value: 'vue' },
{ label: 'React', value: 'react' },
{ label: 'Node.js', value: 'node' }
],
selectedSkills: []
}
}
}
</script>
进阶应用：复选框的全选与反选
在实际业务中,我们经常需要实现全选/反选功能，以下是一个完整的示例：
<template>
<div>
<div class="select-all">
<label>
<input
type="checkbox"
v-model="selectAll"
@change="handleSelectAll"
/>
全选/反选
