uniapp h5项目实现多选按钮/多选标签/多选框

需求:实现简单多选功能,遍历数据,添加样式

1.效果图 

2.以下代码粘贴到代码中,可直接运行,html代码

<view class="page index">
				<view class="list-box">
					<view v-for="(item,index) in typeList" :key="index" @click="choice(index)"
						:class="[item.selected?'selde':'noselde']">
						{{item.selected?item.title:item.title}}
					</view>
				</view>
				<view class="valueList">
					{{selectList}}
				</view>
			</view>

3.js

//给标签赋值
				typeList: [{
						selected: false,
						title: '综合类 20积分一公斤'
					},
					{
						selected: false,
						title: '金属类 20积分一公斤'
					},
					{
						selected: false,
						title: '纸类 20积分一公斤'
					},
					{
						selected: false,
						title: '纸类 20积分一公斤'
					},
					{
						selected: false,
						title: '纸类 20积分一公斤'
					}, {
						selected: false,
						title: '纸类 20积分一公斤'
					},
					{
						selected: false,
						title: '纸类 20积分一公斤'
					}
				],
				selectId: [],

//选择按钮
			choice(index) {
				console.log('index', index)
				//当再次被选中时,取消当前选中项
				if (this.typeList[index].selected == true) {
					this.typeList[index].selected = false;
					//取消选中时删除数组中的值
					for (var i = 0; i < this.selectId.length; i++) {
						if (this.selectId[i] === this.typeList[index].title) {
							this.selectId.splice(i, 1);

						}
					}
					this.selectList = this.selectId
					console.log("选中的值", this.selectId)
				} else {
					this.typeList[index].selected = true;
					this.selectId.push(this.typeList[index].title)
					for (var i = 0; i < this.selectId.length; i++) {
						console.log("选中的值", this.selectId[i])
					}
					this.selectList = this.selectId
					console.log("选中的值", this.selectId)
				}
			}

5.css 

.list-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		// padding: 16rpx;
		border-radius: 10rpx;

		view {
			width: 45%;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			margin-bottom: 30upx;

			// &:not(:nth-child(3n)) {
			// 	margin-right: calc(10% / 2);
			// }
		}
	}

	/* 已选择 */
	.selde {
		border: 1px solid #3EAAFB;
		background: #3EAAFB;
		color: #FFFFFF;
		border-radius: 20rpx;
		font-size: 20rpx;
		padding: 0 10rpx;
	}

	/* 未选择 */
	.noselde {
		border: 1px solid #959595;
		background: #FFFFFF;
		color: #959595;
		border-radius: 20rpx;
		font-size: 20rpx;
		padding: 0 10rpx;
	}

	.valueList {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: center;
	}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智能网络新纪元:机器学习赋能未来计算机网络高速发展

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向的学习指导…

赋能技术 助锂制造|青软青之助力锂电检测行业数字化升级

在全球范围内&#xff0c;新能源转型已成为时代的必然选择。随着“双碳”目标的深入推进&#xff0c;这一趋势愈发明显。而作为新能源领域的一颗璀璨明珠&#xff0c;锂电池的研发、产业链建设和技术创新&#xff0c;无疑是这场能源革命的核心所在。其产业链的日趋完善、技术的…

企业培训系统私有化解决方案:PlayEdu

PlayEdu&#xff1a;打造私有化的企业智慧教育平台&#xff0c;赋能全员高效成长&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 随着企业不断发展及市场竞争加剧&#xff0c;内部培训的重要性日益凸显。然而&#xff0c;在实施过程中&#xff0c;如何确保培训内容与…

2024个人动态线条导航HTML源码

源码介绍 2024个人导航HTML源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 源码下载 2024个人导航HTML源码

进军俄罗斯市场,一站式Yandex广告开户与代运营服务

俄罗斯作为欧洲最大的经济体之一&#xff0c;拥有庞大的消费者群体和独特的市场环境&#xff0c;成为了众多国际商家关注的焦点。要有效地触达这片潜力无限的市场&#xff0c;精准且高效的网络营销策略至关重要。利用Yandex——俄罗斯最大的搜索引擎与数字广告平台&#xff0c;…

计算机网络-浏览器解析到URL对应的IP地址的时间

声明&#xff1a;原文转载链接出自&#xff1a; 哈工大Mooc——计算机网络&#xff1a;作业3 假设你在浏览某网页时点击了一个超链接&#xff0c;URL为“https://www.kicker.com.cn/index.html”&#xff0c;且该URL对应的IP地址在你的计算机上没有缓存&#xff1b;文件index…

路由器如何端口映射到外网?

随着互联网的发展和普及&#xff0c;远程访问已经成为了现代社会的一个重要需求。在复杂的网络环境下&#xff0c;特别是涉及异地组网的情况下&#xff0c;实现远程访问变得更加困难。本文将介绍一种名为【天联】的组网产品&#xff0c;它可以解决复杂网络环境下的远程连接问题…

最优算法100例之41-用两个栈实现队列

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 用两个栈实现队列 题解报告 stack<int> stack1; stack<int> stack2; void push(int node) {stack1.push(node);…

极狐GitLab对接OAuth2实现SSO

本文作者&#xff1a;极狐(GitLab) 高级解决方案架构师 武让 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 企…

windows停掉jenkins服务

在Windows系统中&#xff0c;如果你需要停止Jenkins服务&#xff0c; 使用服务管理器&#xff08;Service Manager&#xff09;: 打开“运行”对话框&#xff08;Win R&#xff09;&#xff0c;输入services.msc&#xff0c;然后回车。 在服务列表中找到“Jenkins”服务&am…

网工基础协议——IP地址

IP地址的概念&#xff1a; IP 地址是我们进行TCP/IP通讯的基础&#xff0c;每个连接到网络上的计算机都必须有一个!P地址。我们目前使用的IP地址是32位的&#xff0c;通常以点分十进制表示。例如:192.168.0.181。IP地址的格式为: IP地址 网络地址 主机地址 或者 |P地址主机地…

【Docker】docker快速安装部署fastdfs的镜像详细记录

部署nacos的docker镜像 第一步&#xff1a; 获取fastdfs镜像1、查看镜像列表2、创建本地映射文件夹 第二步&#xff1a;运行镜像1.使用docker镜像构建tracker服务2.使用docker镜像构建Storage服务3.Storage服务中默认安装了Nginx服务4.如果需要修改storage则配置则进到以下目录…

新手入门:大语言模型训练指南

在这个信息爆炸的时代&#xff0c;人工智能技术正以前所未有的速度渗透到我们生活的方方面面。从智能手机上的语音助手到自动驾驶汽车&#xff0c;AI的应用无处不在。而在这些令人惊叹的技术背后&#xff0c;大语言模型&#xff08;LLM&#xff09;扮演着至关重要的角色。它们不…

从 SQLite 3.4.2 迁移到 3.5.0(二十)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite---调试提示&#xff08;十九&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 ​ SQLite 版本 3.5.0 &#xff08;2007-09-04&#xff09; 引入了一个新的操作系统接口层&#xff0c; 与所有先前版本的 SQLi…

游戏测试审表流程

备注:本文为博主原创文章,未经博主允许禁止转载。如有问题,欢迎指正。 个人笔记(整理不易,有帮助,收藏+点赞+评论,爱你们!!!你的支持是我写作的动力) 笔记目录:笔记本~笔记目录_airtest和selenium那个好用-CSDN博客 个人随笔:工作总结随笔_8、以前工作中都接触过哪…

【MATLAB 预测算法教程】_1粒子群算法优化BP神经网络预测 - 教程和对应MATLAB代码

本文以MATLAB自带的脂肪数据集为例,将数据保存在EXCEL工作簿内,方便替换数据使用,以下介绍粒子群算法优化BP神经网络预测的MATLAB代码编写,主要流程包括1. 读取数据 2.划分训练集和测试集 3.归一化 4.确定BP神经网络的隐含层最优节点数量 5. 使用粒子群算法优化BP的神经网络…

为什么你选择成为一名程序员?

逐码探梦&#xff1a;我选择程序员之路 在数字化的纹理中编织梦想&#xff0c;于逻辑的海洋里追寻真理&#xff0c;程序员&#xff0c;这个职业对我而言不仅仅是一份工作&#xff0c;更是一扇通向无限可能性的大门。选择成为一名程序员&#xff0c;是一个交织着兴趣和职业规划…

数字IC/FPGA——复位篇

本文主要介绍以下几点&#xff1a; 复位的作用及什么时候需要复位复位的分类全局复位、局部复位的目的如何选择全局复位和局部复位同步复位、异步复位及异步复位同步释放的原理、优缺点 注&#xff1a;参考文章在文末给出 目录 一、复位信号的作用和分类1.复位信号的作用2.复…

浅尝一下ECS(Entity Component System)(学习笔记)

参考文章&#xff1a;浅谈Unity ECS&#xff08;一&#xff09;Uniy ECS基础概念介绍&#xff1a;面向未来的ECS - 知乎 (zhihu.com) 视频链接&#xff1a;【青幻译制】GDC讲座系列之三 守望先锋的游戏架构和网络代码_哔哩哔哩_bilibili 云风的 BLOG: 浅谈《守望先锋》中的 E…

政安晨:【Keras机器学习实践要点】(二十六)—— 内卷神经网络

目录 简介 设置 卷积 演变 测试逆卷积层 图像分类 获取 CIFAR10 数据集 数据可视化 卷积神经网络 逆向传播神经网络 比较 损失图和准确率图 可视化卷积核 结论 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Ke…