indexof实现多选

<template>
	<div class="biaoqian">
				<button v-for="(item,index) in biaoqianList" 
				:key='index' 
				class="btn" 
				type="default" 
				size="mini"
				:class="{'active': isChange.indexOf(index)!=-1}" 
				@click="clickBtn(index)">{
    
    {
    
    item}}</button>
		</div>
</template>
export default{
    
    
		data(){
    
    
			return{
    
    
			    isChange:[],  //多选
				biaoqianList:['早餐','午餐','晚餐','宵夜'],
				foodChose:[]
			  }
			},
		methods:{
    
    
				clickBtn(index){
    
    
					// 多选
					if (this.isChange.indexOf(index) == -1) {
    
    
						if(this.isChange.length == 4){
    
    
							uni.showToast({
    
    
								title:'最多选择四项',
								icon:'none'
							})
						}else{
    
    
							this.isChange.push(index);//选中添加到数组里
						}
					} else {
    
    
						this.isChange.splice(this.isChange.indexOf(index), 1); //取消选中
					}
					console.log(this.isChange)
				},
		}
}

<style lang="less">
	.biaoqian{
    
    
				display: flex;
				justify-content: start;
				align-items: center;
				.active{
    
    
					background-color: #76d2f4 ;
					color: white;	
				}
				.btn{
    
    
				border:0.01px solid #76d2f4;
				background-color:white ;
				color: #76d2f4;
			}
		}
</style>