vue 多按钮选中取消

如图效果

话不多说上代码

ul {
	display: flex;
	align-items: center;
	list-style: none;
}
ul li {
	padding: 10px 30px;
	background-color: #eee;
	border-radius: 4px;
	margin: 0px 4px;
}
.active {
	color: #fff;
	transition: 0.2s;
	background-color: orange;
}

<ul>
	<li v-for="(item,index) in list" :key="index" :class="uersList.includes(item)?'active':''"
		@click="tab(item)">{{item}}</li>
</ul>

data() {
		return {
			list: ['租房', '公司','公寓','小卖铺'],
			uersList: [],
			tabIndex: 0
		}
	},
	methods: {
		tab(item,i) {
			if(this.uersList.includes(item)){//检测数组数据
				let index=this.uersList.findIndex((val,i)=>{//返回符合条件的元素的索引位置
					if(val==item){
						return true
					}
				})
				this.uersList.splice(index,1)
			}else{
				this.uersList.push(item)
			}
		}
	}