Vue实现全选多个选择框
更新时间：2025年01月30日 07:00:36 作者：孙 悟 空
使用v-model绑定布尔变量实现全选功能：定义数组存储状态,使用v-for循环渲染选择框,绑定状态；添加全选复选框,绑定布尔变量；使用watch监听全选复选框状态变化,更新数组中每一项的状态
Vue全选多个选择框
可以使用 v-model 来绑定一个布尔类型的变量来实现全选多个选择框的功能。
具体步骤
如下：
- 在
data中定义一个数组，用来存储所有需要选择的项的状态。 - 在模板中使用
v-for指令循环渲染每个选择框，并将每个选择框的状态绑定到数组中对应的项上。 - 在模板中添加一个全选复选框，将其状态绑定到一个布尔类型的变量上。
- 使用
watch监听全选复选框的状态变化，当全选复选框的状态改变时，遍历数组中的每一项，将其状态设置为全选复选框的状态即可。
示例代码
<template>
<div>
<input type="checkbox" v-model="selectAll"> 全选
<div v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.checked"> {{ item.label }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectAll: false,
items: [
{ label: '选项1', checked: false },
{ label: '选项2', checked: false },
{ label: '选项3', checked: false },
],
};
},
watch: {
selectAll(val) {
this.items.forEach(item => {
item.checked = val;
});
},
},
};
</script>在上面的代码中，我们定义了一个 selectAll 变量来表示全选复选框的状态，一个 items 数组来存储所有需要选择的项的状态。
在模板中，使用 v-for 指令循环渲染每个选择框，并将每个选择框的状态绑定到数组中对应的项上。同时，还添加了一个全选复选框，并将其状态绑定到 selectAll 变量上。
在 watch 中，监听 selectAll 变量的变化，当它的状态改变时，遍历 items 数组中的每一项，将其状态设置为 selectAll 的状态即可实现全选功能。
结果展示
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了详解Vue双向数据绑定原理解析 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
vue基于session和github-oauth2实现登录注册验证思路详解
通过 sessionId 可以在 session 表中获取用户的信息,此外,还利用 session 表实现了GitHub 的 OAuth2 第三方登录,本文讲解前端通过简单的方式实现一个基本的登录注册验证功能,感兴趣的朋友跟随小编一起看看吧2024-08-08
这篇文章主要给大家介绍了关于vue-router跳转时打开新页面的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-router具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
在项目中会用到 Electron ， 一种最流行的框架，可使用Javascript构建跨平台的桌面应用程序。在本文中，我们将研究如何通过 Vite 开发 Vue 3 桌面项目，感兴趣的可以了解一下2021-05-05
本文主要介绍了vue中ref()和reactive()区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-07-07
这篇文章主要介绍了Ant Design Vue 修改表格头部样式,首先用到的是customHeaderRow这个API，类型是一个函数，本文通过完整代码给大家详细讲解，需要的朋友可以参考下2022-10-10
vuejs+element UI table表格中实现禁用部分复选框的方法
今天小编就为大家分享一篇vuejs+element UI table表格中实现禁用部分复选框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
在 Vue 3 中上传 KML 文件并在地图上显示的实现方法
KML 文件作为一种标准的地理数据格式,广泛应用于地理信息系统（GIS）中,通过 OpenLayers 和 Vue 3 的组合,您可以方便地实现地图数据的可视化和交互,本文介绍在 Vue 3 中上传 KML 文件并在地图上显示的实现方法,感兴趣的朋友一起看看吧2024-12-12
在Vue组件中,computed属性是在组件的选项对象中声明的,你可以把它们想象成组件的一个小功能,告诉Vue当某些数据变化时,如何更新界面,本文给大家介绍了Vue.js使用computed属性实现数据自动更新,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
最新评论