单选与多选、全选逻辑参考

 

1.单选

template部分：

<button v-for="(item, index) in btns" class="btns" :class='item.on?"on":""' @click='clickBtns(item)' :key="index">

{{item.name}}

</button>

data部分代码：

btns:[{

id : 1,

name : '按钮1'

},{

id : 2,

name : '按钮2'

},{

id : 3,

name : '按钮3'

}]

 methods部分：

clickBtns(item){

 

this.btns = this.btns.map(sItem=>{

 

if(sItem.id == item.id){

sItem.on = true;

}else{

sItem.on =false;

}

return sItem;

})

},

获取单选后的对象

例如数据以下：

btns:[{

id : 1,

name : '按钮1',

on:true,

},{

id : 2,

name : '按钮2'

},{

id : 3,

name : '按钮3',

}]

let singleItem = this.btns.find(sItem=>sItem.on) //找到数据中被选中的对象

console.log(singleItem);

解释：

find(sItem=>sItem.on) 表示找到数组中符合条件的单个对象，这里sItem是每个对象的意思，on是每个对象的字段。一经找到当即返回当前对象。

这个函数其实至关于遍历数组中的每一个对象，找到符合条件的对象的时候，当即返回这个对象。

find(sItem=>sItem.on) 与 find(sItem=>{    return  sItem.on  }) 等价。

 

 

2.多选

多选的原理同样，只须要改单选的methods里函数的逻辑就能够了。

 methods部分

clickBtns(item){

 

this.btns = this.btns.map(sItem=>{

 

sItem.id == item.id &&(sItem.on = sItem.on? false :true);

return sItem;

})

 

},

 

获取多选后的全部对象

例如数据以下：

btns:[{

id : 1,

name : '按钮1',

on:true,

},{

id : 2,

name : '按钮2'

},{

id : 3,

name : '按钮3',

on:true

}]

let multiItem = this.btns.filter(sItem=>sItem.on) //找到数据中被选中的对象

console.log(multiItem);

解释：

filter(sItem=>sItem.on) 表示找到数组中符合条件的多个对象，这里sItem是每个对象的意思，on是每个对象的字段。

这个函数其实至关于遍历数组中的每一个对象，找到符合条件的对象 ，过滤掉全部不符合条件的对象后，从新返回一个数组。

filter(sItem=>sItem.on) 与 filter(sItem=>{    return  sItem.on  }) 等价。