<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>
indexof实现多选
于 2023-03-07 08:43:36 首次发布