Vue.js组件开发-如何实现全选反选

在 Vue.js 中实现全选和反选功能,可以通过结合`v-model`、计算属性和事件处理来完成。


实现思路

• 数据绑定:为每个复选框绑定一个选中状态。

• 全选控制:通过一个复选框控制所有复选框的选中状态。

• 反选控制:通过一个按钮或复选框切换所有复选框的选中状态。


示例


方案一:基础实现

<template><div><!-- 全选复选框 --><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" /><span>全选</span><!-- 选项列表 --><ul><li v-for="(item, index) in items" :key="index"><input type="checkbox" v-model="item.selected" />{{ item.text }}</li></ul><!-- 反选按钮 --><button @click="toggleSelect">反选</button></div>
</template><script>
export default {data() {return {selectAll: false,items: [{ text: 'Item 1', selected: false },{ text: 'Item 2', selected: false },{ text: 'Item 3', selected: false },],};},methods: {// 全选逻辑toggleSelectAll() {this.items.forEach((item) => {item.selected = this.selectAll;});},// 反选逻辑toggleSelect() {this.items.forEach((item) => {item.selected = !item.selected;});},},
};
</script>

方案二:使用计算属性优化

通过计算属性动态更新全选状态,使代码更加简洁和可维护。

<template><div><!-- 全选复选框 --><input type="checkbox" v-model="selectAll" /><span>全选</span><!-- 选项列表 --><ul><li v-for="(item, index) in items" :key="index"><input type="checkbox" v-model="item.selected" />{{ item.text }}</li></ul><!-- 反选按钮 --><button @click="toggleSelect">反选</button></div>
</template><script>
export default {data() {return {items: [{ text: 'Item 1', selected: false },{ text: 'Item 2', selected: false },{ text: 'Item 3', selected: false },],};},computed: {// 计算全选状态selectAll: {get() {// 如果所有项都被选中,返回 truereturn this.items.every((item) => item.selected);},set(value) {// 设置所有项的选中状态this.items.forEach((item) => {item.selected = value;});},},},methods: {// 反选逻辑toggleSelect() {this.items.forEach((item) => {item.selected = !item.selected;});},},
};
</script>

说明

• v-model:用于双向绑定复选框的状态。

• 计算属性:通过`get`和`set`方法动态更新全选状态。

• 全选逻辑:当全选复选框被选中时,所有选项都被选中;否则,所有选项都不被选中。

• 反选逻辑:通过切换每个选项的选中状态实现反选。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/68183.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mybatis——sql映射文件中的增删查改

映射文件内的增删查改 准备工作 准备一张数据表&#xff0c;用于进行数据库的相关操作。新建maven工程&#xff0c; 导入mysql-connector-java和mybatis依赖。新建一个实体类&#xff0c;类的字段要和数据表的数据对应编写接口编写mybatis主配置文件 public class User {priva…

Spring MVC (三) —— 实战演练

项目设计 我们会将前端的代码放入 static 包下&#xff1a; 高内聚&#xff0c;低耦合 这是我们在实现项目的设计思想&#xff0c;一个项目里存在很多个模块&#xff0c;每一个模块内部的要求类与类、方法与方法要相互配合紧密联系&#xff0c;这就是高内聚&#xff0c;低耦合…

Typescript泛型类详细解读

代码示例 (() > {// 定义一个类,类中的属性值的类型是不确定,方法中的参数及返回值的类型也是不确定// 定义一个泛型类class GenericNumber<T>{// 默认的属性的值的类型是泛型类型defaultValue: Tadd: (x: T, y: T) > Tconstructor(defaultValue: T) {this.defaul…

OpenCV:图像处理中的低通滤波

目录 简述 什么是低通滤波&#xff1f; 各种滤波器简介与实现 方盒滤波 均值滤波 中值滤波 高斯滤波 双边滤波 各种滤波的对比与应用场景 相关阅读 OpenCV基础&#xff1a;图像变换-CSDN博客 OpenCV&#xff1a;图像滤波、卷积与卷积核-CSDN博客 简述 低通滤波是一…

Vivado生成X1或X4位宽mcs文件并固化到flash

1.生成mcs文件 01.在vivado里的菜单栏选择"tools"工具栏 02.在"tools"里选择"生成内存配置文件" 03.配置参数 按照FPGA板上的flash型号进行选型&#xff0c;相关配置步骤可参考下图。 注意&#xff1a;Flash数据传输位宽如果需要选择X4位宽&am…

rust学习-rust中的保留字

rust学习-rust中的保留字 已使用的保留字未来可能使用的保留字 保留字是语言中预定义的标识符&#xff0c;不能用作变量名、函数名或其他自定义标识符&#xff0c;Rust的保留字大致可以分为两类&#xff1a;已使用的保留字和未来可能使用的保留字 已使用的保留字 as&#xff1…

【第七天】零基础入门刷题Python-算法篇-数据结构与算法的介绍-一种常见的分治算法(持续更新)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Python数据结构与算法的详细介绍1.Python中的常用的分治算法2. 分治算法3.详细的分治代码1&#xff09;一种常见的分治算法 总结 前言 提示&#xff1a;这…

奖励模型:解析大语言模型的关键工具

标题&#xff1a;奖励模型&#xff1a;解析大语言模型的关键工具 文章信息摘要&#xff1a; 奖励模型是理解和审核大语言模型(LLM)的重要工具&#xff0c;通过简单的评估方式提供了模型内部表征和性能的深入洞察。它不仅能静态比较模型表现&#xff0c;还可帮助诊断训练问题&a…

[Linux]el8安全配置faillock:登录失败达阈值自动锁定账户配置

前言 本篇文章的配置仅使用于el8版本的Linux&#xff0c;目前已在centos8、BCLinux8上验证成功&#xff0c;其他版本系统是否可行还得考查。 el8中管理用户登录失败锁定账户所用的模块是faillock.so&#xff0c;如果想要将配置应用与其他版本的Linux&#xff0c;建议确认Linux…

【nnUNetv2进阶】二十七、nnUNetv2 魔改网络-小试牛刀-引入FMB模块

nnunet使用及改进教程。 【nnUNetv2实践】一、nnUNetv2安装 【nnUNetv2实践】二、nnUNetv2快速入门-训练验证推理集成一条龙教程 【nnUNe

vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定

1. 基础用法 在 Vue3 中&#xff0c;v-model 在组件上的使用有了更灵活的方式。默认情况下&#xff0c;v-model 使用 modelValue 作为 prop&#xff0c;update:modelValue 作为事件。 1.1 基本示例 <!-- CustomInput.vue --> <template><input:value"mo…

TCP协议(网络)

目录 TCP协议 TCP协议段格式(报文首部) 原理图​编辑 确认应答(ACK)机制 报头介绍 超时重传机制​编辑 连接管理机制 为什么要三次握手 服务端状态转化: 客户端状态转化: 理解TIME_WAIT状态 解决TIME_WAIT状态引起的bind失败的方法(可以立即链接端口号) setsockop…

【JS|第29期】JavaScript中的事件类型

日期&#xff1a;2025年1月25日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

基于Java+socket实现多线程聊天室-控制台版

基于Javasocket实现多线程聊天室-控制台版 一、系统介绍二、功能展示1.运行效果 三、代码展示四、其它1.其他系统实现2.获取源码 一、系统介绍 首先启动server端&#xff0c;然后启动client端。任意一个client发送给server的消息都将会被转发给所有在线的client&#xff0c;实…

Redis-缓存

1.缓存 1.1 什么是缓存&#xff1f; 越野车,山地自行车,都拥有"避震器",防止车体加速后因惯性,在酷似"U"字母的地形上飞跃,硬着陆导致的损害,像个弹簧一样;同样,实际开发中,系统也需要"避震器",防止过高的数据访问猛冲系统,导致其操作线程无法…

群晖docker获取私有化镜像http: server gave HTTP response to HTTPS client].

群晖docker获取私有化镜像提示http: server gave HTTP response to HTTPS clien 问题描述 层级时间用户事件Information2023/07/08 12:47:45cxlogeAdd image from xx.xx.31.240:1923/go-gitea/gitea:1.19.3Error2023/07/08 12:47:48cxlogeFailed to pull image [Get "http…

MySQL日志详解——日志分类、二进制日志bin log、回滚日志undo log、重做日志redo log

文章目录 一、前言1.1 MySQL体系结构1.2 MySQL日志分类1.3 其他几种日志1.3.1 查询日志1.3.2 慢查询日志1.3.3 错误日志 二、bin log 二进制日志2.1 bin log简介2.2 binlog日志格式2.3 日志删除2.4 写入/刷盘机制 三、undo log 回滚日志3.1 undo log简介3.2 隐藏字段 —— 事务…

算法中的移动窗帘——C++滑动窗口算法详解

1. 滑动窗口简介 滑动窗口是一种在算法中常用的技巧&#xff0c;主要用来处理具有连续性的子数组或子序列问题。通过滑动窗口&#xff0c;可以在一维数组或字符串上维护一个固定或可变长度的窗口&#xff0c;逐步移动窗口&#xff0c;避免重复计算&#xff0c;从而提升效率。常…

亚博microros小车-原生ubuntu支持系列:11手指控制与手势识别

识别框架还是沿用之前的了MediaPipe Hand。 背景知识不摘重复&#xff0c;参见之前的&#xff1a;亚博microros小车-原生ubuntu支持系列&#xff1a;10-画笔-CSDN博客 手指控制 src/yahboom_esp32_mediapipe/yahboom_esp32_mediapipe/目录下新建文件10_HandCtrl.py&#xff…

LabVIEW太阳能照明监控系统

在公共照明领域&#xff0c;传统的电力照明系统存在高能耗和维护不便等问题。利用LabVIEW开发太阳能照明监控系统&#xff0c;通过智能控制和实时监测&#xff0c;提高能源利用效率&#xff0c;降低维护成本&#xff0c;实现照明系统的可持续发展。 ​ 项目背景 随着能源危机…