uniapp关于选择多个选项和取消选项

本人愚钝,每次需要搜别人的,这次我自己写了一个,方便下次copy

<template>
	<view class="error_detail">
		<!-- 标题 -->
		<view class="timu">
			{{title}}
		</view>

		<!-- 多选数据 -->
		<view class="options" v-for="(item,index) in options"
			:class="{'active': activeIndex == 1? item.status == 1 : '', 'error_active':activeIndex == 1? item.choose == 1:'','bluecolor': selectedIndices.includes(index)}"
			:key="index" @click="toggleSelection(index)">
			<view class="">
				{{item.option}}
			</view>
		</view>

		<!-- 按钮 -->
		<view class="bottom">
			<view class="one" @click="goToTopTopic">
				上一题
			</view>
			<view class="two" @click="goToNextTopic">
				下一题
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'1.新课程所倡导的教学观任务，教学不只是传递和执行的过程，而是()的过程（2分）',
				options: [{
						option: 'A.单向培养',
						status: 0,
						choose: 0
					},
					{
						option: 'B.关注学科发展',
						status: 1,
						choose: 0
					},
					{
						option: 'C.课程创生与开发',
						status: 0,
						choose: 0
					},
					{
						option: 'D.课程创生与开发',
						status: 0,
						choose: 0
					}
				],
				selectedIndices: [], //选中之后的索引
			};
		},
		methods: {
			//如果是其他特殊场景,需要拿id的话,直接把整个item传过来,放在一个数组中,存储相应的id即可
			toggleSelection(index) {
				if (this.selectedIndices.includes(index)) {
					this.selectedIndices = this.selectedIndices.filter((i) => i !== index);
				} else {
					this.selectedIndices.push(index);
				}
			},
			goToNextTopic() {
				if (this.selectedIndices.length == 0) return this.$uni.gettitle('至少需要选择一个选项')
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.error_detail {
		width: 702rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(72, 139, 254, 0.25);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin: 24rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.timu {
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
			margin-bottom: 38rpx;
		}

		.options {
			width: 638rpx;
			height: 78rpx;
			background: #F8F8F8;
			border-radius: 39rpx 39rpx 39rpx 39rpx;
			opacity: 1;
			padding: 18rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			font-size: 28rpx;
			// font-weight: bold;
			color: #000000;
			display: flex;
			justify-content: space-between;

			.image {
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}


		}

		.active {
			background: #EAF7EE;
			opacity: 1;
			color: #26AD60;
		}

		.error_active {
			background: #FFEBEC;
			opacity: 1;
			color: red;
		}

		.bluecolor {
			background: #4995FF;
			opacity: 1;
			color: #fff;
		}


		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 750rpx;
			height: 123rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.one,
			.two {
				width: 287rpx;
				height: 64rpx;
				border-radius: 39rpx 39rpx 39rpx 39rpx;
				opacity: 1;
				border: 1rpx solid #488BFE;
				color: #3889FF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}

			.two {
				background: #3889FF;
				color: #fff;
			}
		}
	}
</style>