Vue 3 ref 怎么实现多选框选中项状态收集

星萱君_3047

星萱君_3047

2026-10-18

248人浏览

原创

vue 3 中用 ref 管理多选框选中项,推荐数组或 set 作为单一响应式数据源:数组适用于固定少量选项,直接 v-model 绑定;set 适合动态大列表,提升去重与查询效率,并配合 isallselected.ref 实现高效全选逻辑。

vue 3 ref 怎么实现多选框选中项状态收集

Vue 3 中用 ref 收集多选框选中项,核心是让响应式变量直接映射用户选择行为——不依赖计算属性反复遍历,也不靠 DOM 查询手动维护,而是用数组或 Set 作为单一数据源,由 v-model 自动同步。

用 ref 绑定数组,最简方式

适用于选项固定、数量不多的场景(如功能开关、类型标签):

  • 定义 selected = ref([]),直接绑定到 <el-checkbox-group v-model="selected"></el-checkbox-group> 或原生 <input type="checkbox" v-model="selected" :value="item.id">
  • 初始化时填入后台返回的已选项 ID 列表,例如:selected.value = ['gga', 'rmc'],对应 checkbox 自动勾选
  • 取消/新增任一选项,selected.value 实时更新,无需额外逻辑

用 ref + Set 管理大列表或需去重的场景

当选项来自动态列表、存在重复添加风险,或需频繁判断是否包含某 ID 时,Set 比数组更高效:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习