本文例項為大家分享了vue實現自定義多選按鈕的具體程式碼，供大家參考，具體內容如下

圖示

返回的選中列表是一個數組

html部分

<!-- 自定義多選 -->
 <div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel(index,item)">{{item.val}}</div>

js部分

//data
 
arr:[
   {
   val:1,ischeck:false
   },{
   val:2,{
   val:3,{
   val:4,{
   val:5,{
   val:6,ischeck:false
   }
  ],selarr:[],//methods
sel(index,item){
  let arr=[...this.arr];
  let selarr=[...this.selarr];
  if(arr[index].ischeck==false){
   arr[index].ischeck=true;
   selarr.push(item)
  }else{
   arr[index].ischeck=false;
   var index11=selarr.indexOf(index)
   selarr.splice(index11,1)
 
  }
 
  this.arr=arr;
  this.selarr=selarr;
 
},

樣式

.list{
 width: 100%;
 line-height: 30px;
}
 
.list.active{
 background: pink;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。