Vue3 如何绑定 checked 属性？从基础到进阶全掌握

在前端开发中，表单元素的双向绑定是一个常见需求。对于 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 属性的方法，你就可以在开发中更加灵活地处理表单元素，提高开发效率和用户体验。无论是简单的单复选框，还是复杂的动态表单，都能轻松应对。

链接: https://fly63.com/article/detial/12817