使用 v-model 绑定数组实现多选框组，勾选即推入、取消即剔除；全选/全不选通过 computed 双向同步；半选状态需用 ref 和 watch 手动设置 indeterminate 属性。

使用 v-model 绑定数组实现多选框组

Vue 3 中，多个 共享同一个 v-model 时，需绑定到一个 数组。Vue 会自动根据勾选状态向该数组添加或移除对应值。

例如：

       type="checkbox"
    :value="item.value"
    v-model="selectedValues"
  >
  {{ item.label }}

其中 selectedValues 是响应式数组（如 ref([])），options 是选项列表（如 [{ label: '苹果', value: 'apple' }, ...]）。勾选即推入，取消即剔除，无需手动操作 DOM。

添加“全选/全不选”复选框

新增一个控制所有项的 checkbox，用 v-model 绑定到布尔值（如 isAllChecked），再通过计算属性或监听器同步数组状态。

立即学习“前端免费学习笔记（深入）”；

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

推荐方式：使用 computed + setter 实现双向联动：

const isAllChecked = computed({
  get() {
    return selectedValues.value.length === options.length && options.length > 0;
  },
  set(checked) {
    if (checked) {
      selectedValues.value = options.map(i => i.value);
    } else {
      selectedValues.value = [];
    }
  }
});

模板中直接绑定：

全选

处理“半选”状态（Indeterminate）

当部分选项被选中时，全选框应显示为中间态（—），这需手动设置 indeterminate 属性（原生 DOM 属性，Vue 不接管）。

用 ref 获取全选框元素，在 watch 中动态更新：

const allCheckbox = ref(null);

watch(selectedValues, () => {
  if (allCheckbox.value) {
    const { length } = selectedValues.value;
    const isAll = length === options.length;
    const isNone = length === 0;
    allCheckbox.value.indeterminate = !isAll && !isNone;
  }
}, { immediate: true });

模板中加 ref：

注意事项与常见问题

• value 必须是基础类型或可被严格比较的值（如 string、number），避免用对象作 value，否则数组匹配失败
• 选项列表 options 变更后，已选中的 selectedValues 不会自动清理不存在的项，建议在数据更新后做一次过滤
• 若用 defineModel（组合式 API 中的 v-model 宏），需确保接收的是数组类型，并自行处理增删逻辑
• 移动端点击区域小，建议包裹 label 或添加 padding 提升体验