在前端开发中，表单元素的双向绑定是一个常见需求。对于 Vue3 项目而言，如何正确地绑定 checkbox 和 radio 的 checked 状态，是许多初学者面临的第一个小门槛。本文将从基础语法到高级应用，带你全面掌握 Vue3 中 checked 绑定的正确姿势。
一、基础绑定：v-model 的简单应用
在 Vue3 中，绑定 checkbox 和 radio 的 checked 状态最常用的方式是使用 v-model 指令。与 Vue2 相比，Vue3 的 v-model 在处理表单元素时更加直观和灵活。
1. 单个 checkbox 的绑定
对于单个 checkbox，v-model 会直接绑定到一个布尔值。当 checkbox 被选中时，这个值为 true；未选中时为 false。
<template>
<div>
<input type="checkbox" v-model="isAgreed" />
<label>我同意用户协议</label>
<p>当前状态：{{ isAgreed ? '已同意' : '未同意' }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isAgreed = ref(false)
</script>2. 多个 checkbox 的绑定
当有多个 checkbox 需要绑定时，通常会使用数组来存储选中的值。每个 checkbox 的 value 属性对应数组中的一个元素。
<template>
<div>
<input type="checkbox" id="apple" value="apple" v-model="selectedFruits" />
<label for="apple">苹果</label>
<input type="checkbox" id="banana" value="banana" v-model="selectedFruits" />
<label for="banana">香蕉</label>
<input type="checkbox" id="orange" value="orange" v-model="selectedFruits" />
<label for="orange">橙子</label>
<p>已选择的水果：{{ selectedFruits.join(', ') }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const selectedFruits = ref([])
</script>3. radio 按钮的绑定
radio 按钮用于从多个选项中选择一个，v-model 通常绑定到一个字符串值，表示当前选中的选项。
<template>
<div>
<input type="radio" id="male" value="male" v-model="gender" />
<label for="male">男</label>
<input type="radio" id="female" value="female" v-model="gender" />
<label for="female">女</label>
<p>您选择的性别是：{{ gender }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const gender = ref('male')
</script>
二、进阶技巧：自定义绑定与动态控制
除了基本的 v-model 绑定，Vue3 还提供了更灵活的方式来控制 checked 状态。
1. 使用:checked 和 @change 手动绑定
在某些场景下，你可能需要更精细地控制绑定逻辑。这时可以使用:checked 绑定选中状态，同时监听 @change 事件来更新数据。
<template>
<div>
<input
type="checkbox"
:checked="isChecked"
@change="handleChange"
/>
<label>自定义绑定示例</label>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isChecked = ref(false)
const handleChange = (event) => {
isChecked.value = event.target.checked
}
</script>
2. 动态绑定多个 checkbox
当需要动态生成多个 checkbox 时，可以结合 v-for 指令使用。
<template>
<div>
<div v-for="option in options" :key="option.id">
<input
type="checkbox"
:id="option.id"
:value="option.value"
v-model="selectedOptions"
/>
<label :for="option.id">{{ option.label }}</label>
</div>
<p>已选择：{{ selectedOptions.join(', ') }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const options = ref([
{ id: 'opt1', value: 'option1', label: '选项1' },
{ id: 'opt2', value: 'option2', label: '选项2' },
{ id: 'opt3', value: 'option3', label: '选项3' }
])
const selectedOptions = ref([])
</script>三、常见问题与解决方案
在实际开发中，绑定 checked 状态时可能会遇到一些问题。下面是一些常见问题及解决方法：
1. 初始值不生效
如果设置了初始值但 checkbox 没有正确显示选中状态，可能是因为数据类型不匹配。确保初始值的类型与 v-model 绑定的数据类型一致。
2. 组件间通信问题
在父子组件通信中传递 checked 状态时，建议使用 defineProps 和 defineEmits 来明确数据流向。
<!-- 子组件 -->
<template>
<input
type="checkbox"
:checked="checked"
@change="$emit('update:checked', $event.target.checked)"
/>
</template>
<script setup>
defineProps({
checked: Boolean
})
defineEmits(['update:checked'])
</script><!-- 父组件 -->
<template>
<ChildComponent :checked="isChecked" @update:checked="isChecked = $event" />
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const isChecked = ref(true)
</script>3. 与表单验证结合
在需要表单验证的场景中，可以使用 Vueuse 提供的 useForm 和 useField 等工具函数，更方便地管理表单状态和验证逻辑。
四、性能优化建议
当页面中有大量 checkbox 需要绑定时，频繁的状态更新可能会影响性能。此时可以考虑：
- 使用 v-model.lazy 修饰符减少更新频率
- 对于静态数据，使用 v-once 指令避免重复渲染
- 大数据量下考虑虚拟列表渲染
掌握了这些 Vue3 中绑定 checked 属性的方法，你就可以在开发中更加灵活地处理表单元素，提高开发效率和用户体验。无论是简单的单复选框，还是复杂的动态表单，都能轻松应对。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！