Vue实现自定义多选按钮的完整代码示例

Vue自定义多选按钮实现概述

本文分享了一个使用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>

接下来是JavaScript逻辑部分。

//data
 
arr:[
   {
   val:1,
   ischeck:false
   },
   {
   val:2,
   ischeck:false
   },
   {
   val:3,
   ischeck:false
   },
   {
   val:4,
   ischeck:false
   },
   {
   val:5,
   ischeck:false
   },
   {
   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;
 
},

最后附上相关的CSS样式代码。

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

以上就是本文的全部内容，希望这些代码能对各位的学习有所帮助，同时也欢迎大家继续支持本站。