当前位置: 首页 > news >正文

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&#xff1a; <!--投票列表--> <ul class"list f16"><li v-for"(list,index) in listData" :key"index" ><!--div click"goAbout(list.orderid)">img :src"list.thumb"<span><i>编…...

​如何选择更快更稳定的存储服务器​

如何选择更快更稳定的存储服务器 选择更快、更稳定的存储服务器需要考虑以下几个方面&#xff1a; 存储介质&#xff1a;存储服务器的主要存储介质包括固态硬盘和机械硬盘。相比于机械硬盘&#xff0c;固态硬盘具有更高的读写速度和更低的延迟&#xff0c;因此能够提供更快的数…...

AcWing89. a^b

题目 求 a a a 的 b b b 次方对 p p p 取模的值。 输入格式 三个整数 a , b , p , a,b,p, a,b,p, 在同一行用空格隔开。 输出格式 输出一个整数&#xff0c;表示 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^…...

【推荐系统】推荐算法:冷启动-召回-粗排-精排-重排 解读

【推荐系统】推荐算法&#xff1a;冷启动-召回-粗排-精排-重排 解读 文章目录 【推荐系统】推荐算法&#xff1a;冷启动-召回-粗排-精排-重排 解读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开门监测装置能够对粮库挡粮…...

六、【图像去水印】

文章目录 裁剪法移动复制法内容识别去水印色阶法去水印消失点法去水印反相混合法 裁剪法 处于边缘的水印&#xff0c;通过裁剪去除&#xff0c;如下图&#xff1a; 移动复制法 移动复制法适用于水印的背景这部分区域比较相似的情况下使用&#xff0c;如下图先使用矩形选区选中…...

电子电器架构 —— 车载网关初入门(二)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 PS:小细节,本文字数5000+,详细描述了网关在车载框架中的具体性能设置。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他…...

AT32固件库外设使用,ArduinoAPI接口移植,模块化

目录 一、ArduinoAPI移植一、通用定时器使用1.计时1.2.ETR外部时钟计数4.ArduinoAPI - timer 三、ADC1.ADC初始化&#xff08;非DMA&#xff09;2.ADC_DMA 规则通道扫描 六、USB HID IAP1.准备好Bootloader和app2.配置好时钟&#xff0c;一定要打开USB3.将生成的时钟配置复制到…...

【Postgres】Postgres常用命令

文章目录 1、导出数据库某张表2、导入某张表到数据库3、查看数据库占用磁盘页数情况4、查看数据库大小5、查看数据表大小6、查看索引大小7、对数据库中表索引按照大小排序8、对数据库中表按照大小排序9、回收空间&#xff08;建议先回收指定表&#xff09;10、设置主键自增序列…...

pthread 读写锁使用详解

pthread 读写锁使用 读写锁&#xff1a;提供了一种高效的机制来控制对共享资源的访问。允许多个线程同时读取共享资源&#xff0c;但只允许一个线程独占地写入访问。适用于读取远远超过写入的场景下&#xff0c;因为写入操作需要独占地访问资源&#xff0c;可能会影响读取操作…...

MySQL扩展语句

if not exists xiaobu&#xff1a;xiaobu这个表不存在&#xff0c;才会创建 zerofill&#xff1a;自动填充位置 1 0001 primary key&#xff1a;当前表的主键&#xff0c;主键只能有一个&#xff0c;而且唯一&#xff0c;而且不能为空 auto_increment&#xff1a;表示该字段…...

阿里云号码认证服务(一键登录)在连接wifi的情况下部分机型下存在的问题

手机型号&#xff1a; vivo S16 存在的现象&#xff1a; 安装手机卡(联通卡)&#xff0c;且连接wifi的情况下&#xff0c;APP登录唤起阿里云一键登录服务大概有90%左右必超时(按照阿里云一键登录官方文档设置的超时时间为5秒)。 解决方案&#xff1a; 1、APP端增加超时判断&…...

电脑屏幕监控软件,能够帮助企业完成哪些事情?

电脑屏幕监控软件是一种能够监控和管理员工在电脑上的操作行为的软件。分为两种监控方式&#xff1a;实时监控和屏幕记录监控。实时监控是对电脑屏幕进行实时录像&#xff0c;屏幕记录监控则是以屏幕快照的形式保存下来&#xff0c;供使用者随时查看。电脑屏幕监控软件&#xf…...

java--方法的其他形式

1.方法定义时&#xff1a;需要按照方法解决的实际业务需求&#xff0c;来设计合理的方法形式解决问题。 1.注意事项 ①如果方法不需要返回数据&#xff0c;返回值类型必须申明成void(无返回值申明)&#xff0c;此时方法内部不可以使用return返回数据。 ②方法如果不需要接收数…...

IDEA配置类、方法注释模板

一、打开 IDEA 的 Settings&#xff0c;点击 Editor–>File and Code Templates&#xff0c;点击右边 File 选项卡下面的 Class&#xff0c;在其中添加图中红框内的内容&#xff1a; /** * author li-kun * date ${YEAR}年${MONTH}月${DAY}日 ${TIME} */当你创建一个新的类…...

PowerDesigner 16数据库(mysql)逆向生成pdm

1、配置数据源 2、测试数据源 but~~~~没成功&#xff0c;shift...

Spring Cloud 之Feign

前言 Feign是一个声明式的Web服务客户端&#xff0c;使得编写HTTP客户端变得更简单。在Java程序中&#xff0c;只需要在方法前加上FeignClient注解&#xff0c;Feign就会自动创建一个HTTP客户端&#xff0c;向指定的URL发送请求。 核心概念 1、注解&#xff1a;在服务接口方…...

通用开源自动化测试框架 - Robot Framework

一、什么是 Robot Framework&#xff1f; 1. Robot Framework 的历史由来 Robot Framework是一种通用的自动化测试框架&#xff0c;最早由Pekka Klrck在2005年开发&#xff0c;并由Nokia Networks作为内部工具使用。后来&#xff0c;该项目以开源形式发布&#xff0c;并得到了…...

css position属性与js滚动

“视口”就是浏览器窗口中实际显示文档内容的区域&#xff0c;不包含浏览器的“外框”&#xff0c;如菜单、工具条和标签。文档则是指整个网页。 1 css 的position static 正常定位&#xff0c;是元素position属性的默认值&#xff0c;元素遵循常规流。 relative 相对定位&…...

python内置模块hashlib对于字符串的加密解密加盐

hash是一类算法而hashlib模块是Python的一个内置模块&#xff0c;主要功能是使用对应的hash算法&#xff0c;加密二进制内容解密二进制内容 常见的hash算法有md5、sha1&#xff0c;sha256, sha512等 特点 1.内容敏感,那怕一个很小的字符发生改变都很明显 2.不可逆,不能逆向求值…...

Unity资源提取技术解密:AssetRipper效能革命与实战指南

Unity资源提取技术解密&#xff1a;AssetRipper效能革命与实战指南 【免费下载链接】AssetRipper GUI Application to work with engine assets, asset bundles, and serialized files 项目地址: https://gitcode.com/GitHub_Trending/as/AssetRipper 在游戏开发迭代加速…...

Amlogic S9XXX设备系统改造完全指南:从入门到进阶

Amlogic S9XXX设备系统改造完全指南&#xff1a;从入门到进阶 【免费下载链接】amlogic-s9xxx-armbian Supports running Armbian on Amlogic, Allwinner, and Rockchip devices. Support a311d, s922x, s905x3, s905x2, s912, s905d, s905x, s905w, s905, s905l, rk3588, rk35…...

Cogito v1预览版3B模型实战体验:超越Llama/DeepSeek的混合推理能力

Cogito v1预览版3B模型实战体验&#xff1a;超越Llama/DeepSeek的混合推理能力 1. 模型概览与核心优势 1.1 什么是Cogito v1预览版 Cogito v1预览版是Deep Cogito推出的混合推理模型系列&#xff0c;这个3B参数的版本在多项基准测试中表现优异。与传统的语言模型不同&#x…...

SAM 3在内容创作中的应用:快速分离图片视频主体,提升剪辑效率

SAM 3在内容创作中的应用&#xff1a;快速分离图片视频主体&#xff0c;提升剪辑效率 1. 引言&#xff1a;内容创作者的痛点与解决方案 在当今内容爆炸的时代&#xff0c;视频创作者和设计师们面临着一个共同的挑战&#xff1a;如何高效地从复杂背景中分离出主体对象。传统方…...

Java微服务集成TranslateGemma:企业级翻译中台构建

Java微服务集成TranslateGemma&#xff1a;企业级翻译中台构建 1. 为什么需要企业级翻译中台 最近在给一家跨境电商平台做技术咨询时&#xff0c;客户提到一个很实际的问题&#xff1a;他们的客服系统、商品管理系统、营销内容平台各自维护着不同的翻译逻辑。客服用的是第三方…...

保姆级教程:在Windows上用VSCode和nRF5340 Audio DK板跑通第一个蓝牙例程

从零开始&#xff1a;WindowsVSCode环境下的nRF5340 Audio DK蓝牙开发实战 在嵌入式开发领域&#xff0c;Nordic Semiconductor的nRF5340 Audio DK开发板因其强大的双核架构和出色的蓝牙音频性能而备受瞩目。但对于刚接触这款开发板的工程师来说&#xff0c;从环境配置到成功运…...

用计算机科学与技术的视角,把谈恋爱流程化:构建可运行、可调试、可迭代的情感操作系统

用计算机科学与技术的视角&#xff0c;把谈恋爱流程化&#xff1a;构建可运行、可调试、可迭代的情感操作系统 善灵驿站 成长心理 技术思维深度融合系列 作者&#xff1a;培风图南以星河揽胜 专栏链接&#xff1a;善灵驿站 &#x1f4cc; 导读&#xff1a;为什么技术人更需要…...

PyMobileDevice3 高效异步架构解析:深入理解iOS设备通信协议栈实现

PyMobileDevice3 高效异步架构解析&#xff1a;深入理解iOS设备通信协议栈实现 【免费下载链接】pymobiledevice3 Pure python3 implementation for working with iDevices (iPhone, etc...). 项目地址: https://gitcode.com/gh_mirrors/py/pymobiledevice3 PyMobileDev…...

DeepSeek-R1-Distill-Qwen-7B实测:推理能力超强的7B小模型

DeepSeek-R1-Distill-Qwen-7B实测&#xff1a;推理能力超强的7B小模型 1. 模型概述 DeepSeek-R1-Distill-Qwen-7B是DeepSeek团队推出的轻量级推理模型&#xff0c;基于Qwen架构蒸馏而来。这个7B参数规模的模型在保持较小体积的同时&#xff0c;展现了令人印象深刻的推理能力。…...

深入解析dlopen:动态库加载的机制与实践

1. 动态库加载的两种方式 在C/C开发中&#xff0c;动态库&#xff08;Dynamic Library&#xff09;的使用是提升代码复用性和灵活性的重要手段。动态库加载主要分为隐式链接和显式链接两种方式&#xff0c;它们各有特点&#xff0c;适用于不同场景。 隐式链接是最常见的方式&am…...