Vue3:checkbox使用及限制选中数量

HTML:
<!--投票列表-->
<ul class="list f16"><li v-for="(list,index) in listData" :key="index" ><!--div @click="goAbout(list.orderid)">img :src="list.thumb"<span><i>编号:</i>{{list.orderid}}</span></div--><h6>姓名:{{list.tpname}}</h6><p>票数:{{list.num}}</p><label><input type="checkbox" :value="list.orderid" v-model="checkGroup" @click="getCheck($event,list.orderid)"><b>已选中</b></label></li>
</ul><!--投票按钮-->
<div class="endButton" @click="checkVote"><button>提交投票</button><div class="countNum" v-if="checkGroup.length > 0">请选择<b>3</b>个,已选择<b> {{checkGroup.length}} </b>个</div>
</div>
JS:
let checkGroup = ref([]) //选中数据//选中 限制选中数量上限在选中时校验
const getCheck =(event,orderid)=>{//设置最多选择三个if(checkGroup.value.length < 3 && event.target.checked) {checkGroup.value.push(orderid)}else if(!event.target.checked){checkGroup.value.splice(checkGroup.value.indexOf(orderid),1)}else{event.target.checked = false//提示使用vantUiproxy.$toast({message: '已超出投票人数!',icon: 'warning',});}
}//提交投票 限制选中数量下限在提交时校验
const checkVote=()=>{//设置至少选择三个if(checkGroup.value.length <3){proxy.$toast({message: '至少选择三个再投票',icon: 'warning',});return}//其他代码if ("提交成功") {//提示使用vantUiproxy.$toast({message: '投票成功!',icon: 'smile',});//清除checkGroup选中数据checkGroup.value = []} else {//提示使用vantUiproxy.$toast({message: response.data.info,icon: 'warning',});//清除checkGroup选中数据checkGroup.value = []}})//其他代码}
CSS:
/*列表样式*/
.list{display:flex;justify-content:space-between;flex-wrap:wrap;}
.list li{width:48%;background:#d71f18;border-radius:1vh;overflow:hidden;margin-top:2vh;color:#fff;text-align:center;padding-bottom:1vh;}
.list li div{position:relative;}
.list li span{display:block;position:absolute;left:1vh;bottom:1vh;background:rgba(0,0,0,0.6);padding:0 1.5vh 0 0;font-size:1.6vh;border-radius:1vh;overflow:hidden;color:#fff;}
.list li span i{display:inline-block;font-style:normal;background:#ac0006;padding:1vh 0 1vh 1vh;margin-right:1vh;}
.list li h6{padding:1.5vh 0 1vh 0;}
.list li p{padding:0 1vh;}
.list li label{display:block;background:#ffecd1;height:3.6vh;position:relative;border-radius:0.5vh;overflow:hidden;width:90%;margin:1.5vh auto 0 auto;}
.list li label:before{content:"\70b9\51fb\9009\4e2d";position:absolute;left:0;top:0;width:100%;text-align:center;color:#c0151b;line-height:3.8vh;}
.list li label input,.list li label input+b{display:none;}
.list li label input:checked+b{background:#ffcc00;display:block;position:absolute;left:0;top:0;width:100%;z-index:2;color:#c0151b;line-height:3.8vh;text-align:center;font-weight:normal;}/*底部按钮样式*/
.endButton{position:fixed;left:0;bottom:0;width:100%;background:#ac0006;z-index:5;padding:1vh 0 1.5vh 0;color:#fff;text-align:center;}
.countNum{padding-top:1vh;font-size:1.4vh;}
.endButton button{border:none;background:none;font-size:2.4vh;font-weight:bold;}
相关文章:
Vue3:checkbox使用及限制选中数量
HTML: <!--投票列表--> <ul class"list f16"><li v-for"(list,index) in listData" :key"index" ><!--div click"goAbout(list.orderid)">img :src"list.thumb"<span><i>编…...
如何选择更快更稳定的存储服务器
如何选择更快更稳定的存储服务器 选择更快、更稳定的存储服务器需要考虑以下几个方面: 存储介质:存储服务器的主要存储介质包括固态硬盘和机械硬盘。相比于机械硬盘,固态硬盘具有更高的读写速度和更低的延迟,因此能够提供更快的数…...
AcWing89. a^b
题目 求 a a a 的 b b b 次方对 p p p 取模的值。 输入格式 三个整数 a , b , p , a,b,p, a,b,p, 在同一行用空格隔开。 输出格式 输出一个整数,表示 a^b mod p 的值。 数据范围 0 ≤ a , b ≤ 1 0 9 0≤a,b≤10^9 0≤a,b≤109 1 ≤ p ≤ 1 0 9 1≤p≤10^…...
【推荐系统】推荐算法:冷启动-召回-粗排-精排-重排 解读
【推荐系统】推荐算法:冷启动-召回-粗排-精排-重排 解读 文章目录 【推荐系统】推荐算法:冷启动-召回-粗排-精排-重排 解读1. 介绍2. 冷启动2.1 用户冷启动2.1.1 利用用户注册信息冷启动2.1.2 好物推荐冷启动2.1.3 问题启发式冷启动2.1.4 社交冷启动2.1.…...
NB-IOT的粮库挡粮门异动监测装置
一种基于NBIOT的粮库挡粮门异动监测装置,包括若干个NBIOT开门监测装置,物联网后台管理系统,NBIOT低功耗广域网络和用户访问终端;各个NBIOT开门监测装置通过NBIOT低功耗广域网络与物联网后台管理系统连接,物联网后台管理系统与用户访问终端连接.NBIOT开门监测装置能够对粮库挡粮…...
六、【图像去水印】
文章目录 裁剪法移动复制法内容识别去水印色阶法去水印消失点法去水印反相混合法 裁剪法 处于边缘的水印,通过裁剪去除,如下图: 移动复制法 移动复制法适用于水印的背景这部分区域比较相似的情况下使用,如下图先使用矩形选区选中…...
电子电器架构 —— 车载网关初入门(二)
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 PS:小细节,本文字数5000+,详细描述了网关在车载框架中的具体性能设置。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他…...
AT32固件库外设使用,ArduinoAPI接口移植,模块化
目录 一、ArduinoAPI移植一、通用定时器使用1.计时1.2.ETR外部时钟计数4.ArduinoAPI - timer 三、ADC1.ADC初始化(非DMA)2.ADC_DMA 规则通道扫描 六、USB HID IAP1.准备好Bootloader和app2.配置好时钟,一定要打开USB3.将生成的时钟配置复制到…...
【Postgres】Postgres常用命令
文章目录 1、导出数据库某张表2、导入某张表到数据库3、查看数据库占用磁盘页数情况4、查看数据库大小5、查看数据表大小6、查看索引大小7、对数据库中表索引按照大小排序8、对数据库中表按照大小排序9、回收空间(建议先回收指定表)10、设置主键自增序列…...
pthread 读写锁使用详解
pthread 读写锁使用 读写锁:提供了一种高效的机制来控制对共享资源的访问。允许多个线程同时读取共享资源,但只允许一个线程独占地写入访问。适用于读取远远超过写入的场景下,因为写入操作需要独占地访问资源,可能会影响读取操作…...
MySQL扩展语句
if not exists xiaobu:xiaobu这个表不存在,才会创建 zerofill:自动填充位置 1 0001 primary key:当前表的主键,主键只能有一个,而且唯一,而且不能为空 auto_increment:表示该字段…...
阿里云号码认证服务(一键登录)在连接wifi的情况下部分机型下存在的问题
手机型号: vivo S16 存在的现象: 安装手机卡(联通卡),且连接wifi的情况下,APP登录唤起阿里云一键登录服务大概有90%左右必超时(按照阿里云一键登录官方文档设置的超时时间为5秒)。 解决方案: 1、APP端增加超时判断&…...
电脑屏幕监控软件,能够帮助企业完成哪些事情?
电脑屏幕监控软件是一种能够监控和管理员工在电脑上的操作行为的软件。分为两种监控方式:实时监控和屏幕记录监控。实时监控是对电脑屏幕进行实时录像,屏幕记录监控则是以屏幕快照的形式保存下来,供使用者随时查看。电脑屏幕监控软件…...
java--方法的其他形式
1.方法定义时:需要按照方法解决的实际业务需求,来设计合理的方法形式解决问题。 1.注意事项 ①如果方法不需要返回数据,返回值类型必须申明成void(无返回值申明),此时方法内部不可以使用return返回数据。 ②方法如果不需要接收数…...
IDEA配置类、方法注释模板
一、打开 IDEA 的 Settings,点击 Editor–>File and Code Templates,点击右边 File 选项卡下面的 Class,在其中添加图中红框内的内容: /** * author li-kun * date ${YEAR}年${MONTH}月${DAY}日 ${TIME} */当你创建一个新的类…...
PowerDesigner 16数据库(mysql)逆向生成pdm
1、配置数据源 2、测试数据源 but~~~~没成功,shift...
Spring Cloud 之Feign
前言 Feign是一个声明式的Web服务客户端,使得编写HTTP客户端变得更简单。在Java程序中,只需要在方法前加上FeignClient注解,Feign就会自动创建一个HTTP客户端,向指定的URL发送请求。 核心概念 1、注解:在服务接口方…...
通用开源自动化测试框架 - Robot Framework
一、什么是 Robot Framework? 1. Robot Framework 的历史由来 Robot Framework是一种通用的自动化测试框架,最早由Pekka Klrck在2005年开发,并由Nokia Networks作为内部工具使用。后来,该项目以开源形式发布,并得到了…...
css position属性与js滚动
“视口”就是浏览器窗口中实际显示文档内容的区域,不包含浏览器的“外框”,如菜单、工具条和标签。文档则是指整个网页。 1 css 的position static 正常定位,是元素position属性的默认值,元素遵循常规流。 relative 相对定位&…...
python内置模块hashlib对于字符串的加密解密加盐
hash是一类算法而hashlib模块是Python的一个内置模块,主要功能是使用对应的hash算法,加密二进制内容解密二进制内容 常见的hash算法有md5、sha1,sha256, sha512等 特点 1.内容敏感,那怕一个很小的字符发生改变都很明显 2.不可逆,不能逆向求值…...
从零玩转GitHub:避坑指南与进阶技巧——2026年还不懂的天塌了
好的,今天这篇,咱不聊风花雪月,不扯行业趋势,就唠一个程序员安身立命的硬通货——GitHub。 对,就是那个绿油油的头像、一片Contributions的小方格,被无数简历写成“熟悉版本控制工具”,但可能连…...
3步快速解密QQ音乐加密文件:QMCDecode终极免费解决方案
3步快速解密QQ音乐加密文件:QMCDecode终极免费解决方案 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac,qmc0,qmc3转mp3, mflac,mflac0等转flac),仅支持macOS,可自动识别到QQ音乐下载目录,默认…...
Carsim与Matlab Simulink联合仿真四轮电动汽车转向容错控制模型
Carsim与matlab/simulink联合仿真,线控转向,四轮电动汽车转向失效容错控制模型,提供参考文献 线控转向系统(Steer-by-Wire)在四轮独立驱动电动汽车中的应用越来越火,但转向失效问题始终是悬在工程师头上的…...
Zigbee网关配网操作全解析:从连接到触发
1. Zigbee网关配网前的准备工作 第一次接触Zigbee网关配网的朋友可能会觉得有点复杂,但其实只要跟着步骤一步步来,整个过程并不难。我刚开始接触时也踩过不少坑,现在把这些经验都整理出来,希望能帮你少走弯路。 首先得确认你的硬件…...
RS232 vs RS485 vs TTL:如何为你的嵌入式项目选择正确的电平标准?
RS232 vs RS485 vs TTL:嵌入式工程师的电平标准选型指南 在嵌入式系统开发中,选择合适的电平标准往往决定了整个通信系统的可靠性和成本效益。就像建筑师需要根据不同的地质条件选择合适的地基方案一样,工程师也需要根据传输距离、环境干扰和…...
Pylint魔法方法验证:10个技巧确保特殊方法符合Python规范的终极指南
Pylint魔法方法验证:10个技巧确保特殊方法符合Python规范的终极指南 【免费下载链接】pylint Its not just a linter that annoys you! 项目地址: https://gitcode.com/gh_mirrors/pyl/pylint Python开发者们,你是否曾为魔法方法(dund…...
如何为PageSpy远程调试工具贡献力量:完整社区指南
如何为PageSpy远程调试工具贡献力量:完整社区指南 【免费下载链接】page-spy-web Debug remotely and easily like chrome devtools. 项目地址: https://gitcode.com/gh_mirrors/pa/page-spy-web PageSpy是一款强大的开源远程调试工具,它让开发者…...
【限时开源】某金融级TCC事务中间件核心模块源码解析(含TCC-Coordinator状态机设计文档V2.3)
第一章:【限时开源】某金融级TCC事务中间件核心模块源码解析(含TCC-Coordinator状态机设计文档V2.3)本章聚焦于已开源的金融级TCC事务中间件核心协调器(TCC-Coordinator)的实现细节,重点剖析其高可用状态机…...
Smelpro Macaron多模无线开发板技术解析
1. Smelpro Macaron 开发板深度技术解析Smelpro Macaron 是一款面向物联网(IoT)边缘节点设计的高性能多模无线开发平台。其核心价值在于将 ESP32-S3 的强大处理能力与 RAK3172 多协议射频模块深度融合,构建出一个可同时覆盖 LoRaWAN、Sigfox、…...
RK3588中使用Serial转发订阅的话题数据
我们在ROS的使用中,常常会通过rostopic echo /***来订阅某个话题数据的输出,我想通过串口对其通串口进行转发。#查看ros话题列表 rostopic list 找到一个你想要订阅的话题如/IMU_data#订阅话题通过终端查看 rostopic echo /IMU_data就会看到以下这种数据…...
