vue实现点击选择多选标签（整理）

css
.listBox{
	display: flex;
	flex-wrap: wrap;
}
.list {
	border: 1px solid #BEC3CB;
	padding: 11px 27px;
	border-radius: 100px;
	margin-right: 20px;
	margin-bottom: 20px;
	cursor: pointer;
}
.checked {
	color: #FFFFFF;
	background: #3377FF;
	border: 1px solid #3377FF;
}

html
<div class="listBox">
	<div class="list" v-for="c,index of labelList" :key="index" :class="{checked:arr.includes(index)}"
		@click="checkedBox(index)">{{c}}</div>
</div>

data() {
	return {
			labelList: ["标签1", "标签2", "标签3", "标签4", "标签5"],
			arr: [],
	}
}

methods: {
	// 点击多选标签
	checkedBox(i) {
		if (this.arr.includes(i)) {
			//includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
			//filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
			this.arr = this.arr.filter(function(ele) {
				return ele != i;
			});
		} else {
			this.arr.push(i);
			console.log(this.arr)
		}
	},
}