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
    }
}