本文实例为大家分享了vue实现自定义多选按钮的具体代码，供大家参考，具体内容如下图示返回的选中列表是一个数组html部分



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;

},
//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;
}
.list{
width: 100%;
line-height: 30px;
}

.list.active{
background: pink;
}以上就是本文的全部内容，希望对大家的学习有所帮助。