vue实现自定义多选按钮

  • Z时代
  • 2024-01-10
  • 分类：IT

本文实例为大家分享了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,
   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;
},

样式

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是 vue实现自定义多选按钮 的全部内容， 来源链接： utcz.com/p/237486.html

回到顶部