單選與多選、全選邏輯參考

 

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