vue 可选按钮_vue实现自定义多选按钮

本文实例为大家分享了vue实现自定义多选按钮的具体代码，供大家参考，具体内容如下

图示

返回的选中列表是一个数组

html部分

{{item.val}}

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;

}

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