2020-web前端-vue 循环多个标签，点击标签变色，再点击取消，可以同时点击多个

同学，先看一下效果吧！！！！

看到了吧，这就是我要完成的，效果哦，上面的标签卡，我要选中，并且还可以多选，我还可以取消任意一个。

首先，看看，这行代码

定义，一个数组

最后也逻辑

<template>
	<view class="complain">
		<!-- 投诉类型 -->
		<view class="type">
			<text class="type-title">投诉类型</text>
			<view class="type-view">
				<view class="type-li" v-for="(item, index) in typeLi" :key="index" @tap="hander(index, $event)">
					<!-- <view class="type-item" :class="isactive == index ? 'addclass' : '' ">{{item.name}}</view> -->
					<view class="type-item" :class="{ bgcolor: spanIndex.indexOf(index) > -1 }">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<!-- 投诉文本 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeLi: [
				{
					name: '服务态度'
				},
				{
					name: '菜品问题'
				},
				{
					name: '付款问题'
				}
			],

			// 选中
			isactive: 0,
			spanIndex: []
		};
	},
	onLoad() {},
	methods: {
		hander(index, e) {
			// console.log(index, e);
			// this.isactive = index
			let arrIndex = this.spanIndex.indexOf(index);
			console.log(arrIndex);

			if (arrIndex > -1) {
				this.spanIndex.splice(arrIndex, 1);
			} else {
				this.spanIndex.push(index);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.complain {
	padding: 0 40rpx;
	box-sizing: border-box;

	// 投诉类型
	.type {
		.type-title {
			line-height: 2;
			font-size: 36rpx;
		}
		.type-view {
			display: flex;
			.type-li {
				margin-right: 20rpx;
				.type-item {
					width: 170rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 1px solid #ccc;
					color: #666;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.bgcolor {
			background-color: #f0ad4e;
			color: #fff !important;
			border: 1px solid #f0ad4e !important;
		}
	}

	// 投诉文本
}
</style>

这就是实现的原理，你们可以瞧瞧！！！ look look !!!