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

Vue 中多选框绑定数组类型数据,核心就是用 v-model 指令直接绑定一个空数组或已有值的数组,每个多选框通过 value 属性声明自己的唯一标识值,Vue 会自动维护该数组的增删。
一、基础写法:v-model 绑定数组 + value 设置选项值
这是最常用也最推荐的方式。所有复选框共享同一个 v-model,但各自有独立的 value:
- 选中时,对应
value自动推入绑定的数组 - 取消选中时,该
value自动从数组中移除 - 数组初始值必须是数组类型(如
[]或['apple', 'banana']),否则 Vue 无法正确识别为多选模式
示例:
苹果
香蕉
樱桃
已选:{{ selectedFruits }}
Vue 3 组合式 API 与 <script setup> 最佳实践,涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。</p> </div> <a rel="nofollow" href="/xiazai/skill8748" title="vue-composition-api-best-practices" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <br> </div> <br></template><br><br><script><br>export default {<br> data() {<br> return {<br> selectedFruits: [] // 必须初始化为空数组<br> }<br> }<br>}<br></script>
二、动态渲染多选框:配合 v-for 循环生成
当选项来自后端或需灵活配置时,用 v-for 动态生成更合理:
- 每个
input的:value绑定循环项(如item.id或item.name) -
v-model仍指向同一个数组变量 - 确保
:key唯一,避免渲染错乱
示例:
data() {
return {
selectedFruits: ['apple'], // 默认选中苹果
fruitList: [
{ value: 'apple', label: '苹果' },
{ value: 'banana', label: '香蕉' },
{ value: 'cherry', label: '樱桃' }
]
}
}
三、注意事项与常见误区
实际开发中容易忽略但影响功能的关键点:
-
不能用字符串或布尔值初始化数组绑定变量 —— 若写成
selectedFruits: ''或selectedFruits: false,Vue 会当作单复选框处理,只存true/false -
value 必须是字符串、数字或布尔值 —— 不支持直接传对象(如
:value="item"),否则数组里存的是引用,比较和更新易出错;如需对象映射,建议用 ID 字符串再查表 -
原生多选下拉框(
<select multiple></select>)也适用相同逻辑 ——v-model同样绑定数组,<option></option>的value决定入数组的值 - 若需响应选中变化,可用
watch监听数组,或用计算属性派生新状态(如isAllSelected)
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!
相关文章
Laravel Sail 与 Vue 3 前后端分离项目的最佳实践配置指南
Vue 3 模板语法中怎么实现表格列的动态显隐与顺序调整
Pinia 怎么结合 TypeScript 定义强类型的状态接口
Vue 3 中 Axios 怎么配置自定义传输协议实现特殊加密请求
Vue 3 模板语法中怎么在模板中调用自定义的全局或局部过滤器(Vue 3 替代方案)
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn










