Vue.js中如何为自定义多选复选框组绑定多个值

这个功能Vue原生就做了支持，不需要自己写事件监听手动维护选中值，逻辑比带multiple属性的select绑定还要简单。

核心逻辑 #

同一组的所有复选框，统一用v-model绑定到同一个数组类型的响应式变量上，给每个复选框单独配置自身的value属性即可。Vue会自动处理值的同步：勾选对应项时把当前value推入数组，取消勾选时自动把对应值从数组中移除。

代码示例 #

以Vue3 组合式API写法为例：

<script setup>
import { ref } from 'vue'
// 存储所有选中的配套项，初始为空数组即默认无选中项
const selectedAmenities = ref([])
// 配套选项列表，按实际业务需求配置即可
const amenityList = [
  { val: 'free_wifi', name: '免费WiFi' },
  { val: 'free_park', name: '免费停车' },
  { val: 'has_breakfast', name: '含早餐' },
  { val: 'has_pool', name: '游泳池' },
  { val: 'has_gym', name: '健身房' }
]
</script>

<template>
  <div class="amenity-selector">
    <h4>住宿配套选择</h4>
    <!-- 遍历渲染所有复选框 -->
    <label 
      v-for="item in amenityList" 
      :key="item.val"
      style="display: block; margin: 8px 0; cursor: pointer;"
    >
      <input 
        type="checkbox" 
        v-model="selectedAmenities" 
        :value="item.val"
      >
      <span style="margin-left: 6px;">{{ item.name }}</span>
    </label>

    <!-- 开发调试用，可实时查看绑定结果 -->
    <p>已选配套值：{{ selectedAmenities }}</p>
  </div>
</template>

注意事项 #

• 绑定的响应式变量初始值必须是数组类型，不要用字符串、null、对象这类类型，否则绑定逻辑会出现异常
• 如果需要默认选中部分选项，直接在初始数组里写入对应项的value即可，比如const selectedAmenities = ref(['free_wifi', 'has_breakfast'])，页面加载时这两项就会默认是勾选状态
• 如果选项值是对象类型，直接把对象作为:value绑定即可，Vue会按引用匹配选中状态
• 你业务场景里需要的UI效果，只要给选项标签加对应布局、间距样式就能还原，绑定逻辑不需要做额外调整

内容的提问来源于stack exchange，提问作者Ali EXE