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

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

1.效果图

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

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

javascript 复制代码
//给标签赋值
				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

javascript 复制代码
.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;
	}
相关推荐
王哈哈的学习笔记13 小时前
uniapp小程序使用echarts
前端·小程序·uni-app
yrldjsbk13 小时前
uniapp小程序开发入门01-快速搭建一个空白的项目并预览它
uni-app
JavaDog程序狗14 小时前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
七七小报14 小时前
uniapp-商城-42-shop 后台管理 分包
前端·uni-app
七七小报18 小时前
uniapp-商城-40-shop 购物车 选好了 进行订单确认4 配送方式3 地址编辑
uni-app
xuanjiong21 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
flying robot1 天前
uniapp: 低功耗蓝牙(BLE)的使用
uni-app
程序猿John1 天前
uniapp跳转和获取参数方式
前端·javascript·uni-app
七七小报2 天前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
七七小报2 天前
uniapp-商城-39-shop 购物车 选好了 进行订单确认4 配送方式2 地址页面
uni-app