Vue 模板语法怎么在表单多选框中绑定数组类型数据

秋辰同学_6079

秋辰同学_6079

2026-10-24

491人浏览

原创

vue多选框绑定数组的核心是v-model绑定数组并为每个checkbox设置value值,选中时自动添加、取消时自动移除;需初始化为空数组,value须为字符串/数字/布尔值,动态渲染用v-for配合:key。

vue 模板语法怎么在表单多选框中绑定数组类型数据

Vue 中多选框绑定数组类型数据,核心就是用 v-model 指令直接绑定一个空数组或已有值的数组,每个多选框通过 value 属性声明自己的唯一标识值,Vue 会自动维护该数组的增删。

一、基础写法:v-model 绑定数组 + value 设置选项值

这是最常用也最推荐的方式。所有复选框共享同一个 v-model,但各自有独立的 value:

  • 选中时,对应 value 自动推入绑定的数组
  • 取消选中时,该 value 自动从数组中移除
  • 数组初始值必须是数组类型(如 [] 或 ['apple', 'banana']),否则 Vue 无法正确识别为多选模式

示例: