vue 實作全選，反選功能

一般需要用到全選和反選的示例比如：購物車，批量添加，批量删除等

 //需要用到的變量

itemList: [], // 商品清單

totalPrice: 0, //商品總價格

isCheckAll: false, //全選的checkbox是否選中

isChecked: false, //某個checkbox是否選中

checkedIdList: [], //選中的商品的id組合

checkedItemList: [] //選中的商品的清單組合
           

//全選input
<tr>
    <td>
        <div>
            <input type="checkbox" :checked="isCheckAll" @click="checkAll($event)">
            <span>全選</span>
        </div>
    </td>
</tr>

//單選的input
<tr v-for="item in itemList" :key="item.id">
    <td>
        <input :checked="item.isChecked" type="checkbox" @click="checkOne($event, item.id)">
    </td>
</tr>

/全選
checkAll(e) {
    let checkAllItem = e.target;
    this.checkedIdList = [];
    this.checkedItemList = [];
    if (checkAllItem.checked) {
        for (let item of this.itemList) {
            item.isChecked = true;
            this.checkedIdList.push(item.id);
            this.checkedItemList.push(item);
            this.totalPrice += Number(item.price);
        }
        this.isCheckAll = true;
    } else {
        for (let item of this.itemList) {
            item.isChecked = false;
        }
        this.totalPrice = 0;
        this.isCheckAll = false;
        this.checkedIdList = [];
        this.checkedItemList = [];
    }
},
//單選
checkOne(e, id){
    let checkOneItem = e.target;
    if(checkOneItem.checked == true){
        for(let item of this.itemList){
            if(item.id == id){
                this.checkedIdList.push(item.id)
                this.checkedItemList.push(item)
                item.isChecked = true
            }
        }
        if(this.itemList.length == this.checkedIdList.length){
            this.isCheckAll = true;
        }
    }else {
        for(let item of this.itemList){
            if(item.id == id){
                item.isChecked = false;
                let index = this.checkedIdList.indexOf(id)
                this.checkedIdList.splice(index, 1)
                this.checkedItemList.splice(index, 1)
            }
        }
        this.isCheckAll = false
    }
}