uni 实现多选 选中改变样式 可取消

效果图：

templete

<view class="">
					福利待遇
				</view>
				<view class="hiring-state">
					<view v-for="(value,index) in welfare_lists" @click="checked_this(index)"
						:class="{active:rSelect.includes(index)}">{{value}}</view>

				</view>

data数据

js

// 福利待遇
			checked_this(e) {
				let index = this.rSelect.indexOf(e)
				if (index == -1) {
					this.rSelect.push(e)
				} else {
					this.rSelect.splice(index, 1)
				}
			},

我的css

// 福利待遇
	.welfare {
		padding: 20upx;

		.hiring-state {
			margin-top: 15upx;
			display: flex;
			flex-wrap: wrap;

			view {
				font-weight: normal !important;
				font-size: 26upx !important;
				color: #82A1D8;
				background-color: rgba($color: #82A1D8, $alpha: .3);
				margin-right: 10upx;
				padding: 5upx 20upx;
				margin-bottom: 10upx;
			}

			view.active {
				background-color: #6289CD;
				color: #FFFFFF;
			}
		}
	}