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 }) 等价。