answer.vue 2.79 KB
<template>
	<view class="content">
		<view class="">
			<view class="" style="padding-left: 94rpx;margin:36rpx 0">
				<text class="dx">多选</text><text class="num">第1题</text><text class="all">/共30题</text>
			</view>
			<view class="" style="text-align: center;">
				一下对压缩机故障描述有误的是?
			</view>
			<view class="" style="margin-top: 130rpx;">
				<view class="list-box">
					<view v-for="(item,index) in list" :key="index" @click="choice(index)" :class="[item.selected?'selde':'noselde']">
						{{item.selected?item.title:item.title}}
					</view>
				</view>
			</view>
			<button class="btn">下一题</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						selected: false,
						title: 'A'
					},
					{
						selected: false,
						title: 'B'
					},
					{
						selected: false,
						title: 'C'
					},
					{
						selected: false,
						title: 'D'
					},
					{
						selected: false,
						title: 'E'
					}
				],
				selectId:[],
			};
		},
		methods: {
			abc() {
				console.log("11111")
				var arr = document.querySelector(".btm");
				for (let i = 0; i < arr.length; i++) {
					arr[i].onclick = function() {
						console.log(this.value)
					}
				}
			},
			//选择按钮
			choice(index) {
				if (this.list[index].selected == true) {
					this.list[index].selected = false;
					//取消选中时删除数组中的值
					for (var i = 0; i < this.selectId.length; i++) {
						if (this.selectId[i] === this.list[index].title) {
							this.selectId.splice(i, 1);
						}
					}
					console.log("选中的值", this.selectId)
				} else {
					this.list[index].selected = true;
					this.selectId.push(this.list[index].title)
					console.log("选中的值", this.selectId)
				}
			}
		},
		mounted() {
			console.log("111111")
		}
	}
</script>

<style lang="scss">
	.content {
		width: 600rpx;
		height: 800rpx;
		/* background: #8F8F94; */
		margin: 0 auto;
	}

	.dx {
		padding: 0rpx;
		background: #2979FF;
		color: #FFFFFF;
		border-radius: 0px;
	}

	.num {
		color: #2B85E4;
	}

	.all {
		color: #8F8F94;
	}

	.btn {
		margin-top: 98rpx;
		width: 476rpx;
		height: 60rpx;
		line-height: 30px;
		background: #007AFF;
		color: #FFFFFF;
	}

	.btm {
		width: 476rpx;
		height: 60rpx;
		line-height: 30px;
		margin: 34rpx auto;
	}

	.list-box {
		// display: flex;
		// flex-wrap: wrap;
		padding: 16upx;
		border-radius: 10upx;

		view {
			width: 476rpx;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			margin: 26rpx auto 0;

		}

	}

	/*已选择*/
	.selde {
		background: #007AFF;
		color: #FFFFFF;
		border-radius: 20upx;
		font-size: 26rpx;
		padding: 0 10upx;
	}

	/*未选择*/
	.noselde {
		background: #E4E7ED;
		color: #959595;
		border-radius: 20upx;
		font-size: 20upx;
		padding: 0 10upx;
	}
</style>