目前反选没法去更改全选按钮

<body>
    <div id="app">
        <ul>
            <!-- 单个复选框的情形 -->
            <!-- 不要用click  使用change -->
            <input type="checkbox" v-model="isCheckAll" @change="handler" />
            全选/全不选
            <button @click="antiSelect">反选</button>
            <li v-for="(item,index) in cartData" :key="item.id" style="list-style: none">
                <!-- 该处为多个复选框的情形 -->
                <input type="checkbox" :value="item.id" v-model="checkedArr" @change="isCheckedAll"/>
                商品id:{{item.id}}  
                商品名称:{{item.name}}  
                商品单价:{{item.price}}   
                商品数量:<button @click="decr(index,item)">-</button>{{item.num}}
                            <button @click="incr(index,item)">+</button>   
                商品小计:{{item.price * item.num}}
            </li>
        </ul>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var cartData = [
        {id: 1,name: "小米",price: 100,num: 1,},
        {id: 2,name: "华为",price: 200,num: 1,},
        {id: 3,name: "联想",price: 300,num: 1,},
    ];
    new Vue({
        el: "#app",
        data: {
            cartData,
            // 是选全选
            isCheckAll: false,
            // 选中的元素集合
            checkedArr: [],
        },
        methods: {
            decr: function (index, item) {
                if (item.num === 1) {
                    if (confirm("这么好的商品你确认就不买了吗?")) {
                        this.cartData.splice(index, 1);
                        let key = this.checkedArr.indexOf(item.id);
                        if (key > -1) {
                            // 删除选中记录
                            this.checkedArr.splice(key, 1);
                        }
                    }
                    return false;
                }
                item.num--;
            },
            incr: function (index, item) {
                item.num++;
            },
            // 全选/全不选
            handler: function () {
                this.checkedArr = [];
                if (this.isCheckAll) {
                    // 循环,将挨个的商品的id丢到checkedArr里面去
                    this.cartData.forEach((el) => {
                        this.checkedArr.push(el.id);
                    });
                }
            },
            // 通过商品的复选框改变“全选/全不选”复选框的状态
            isCheckedAll: function () {
                this.isCheckAll = this.checkedArr.length === this.cartData.length;
                // this.isCheckAll = this.checkedArr.length === this.cartData.length ? true : false
            },
            // 反选
            antiSelect: function () {
                // 循环整个商品列表
                let tmp = [];
                this.cartData.forEach((el) => {
                    //  arr.includes(el) 表示在arr中判断是否包含el,如果包含则返回true,否则返回false
                    if (!this.checkedArr.includes(el.id)) {
                        // 说明么有,则要
                        tmp.push(el.id);
                    }
                });

                // this.cartData.forEach((el) => {
                //     if (this.checkedArr.indexOf(el.id) === -1) {
                //         // 说明么有,则要
                //         tmp.push(el.id);
                //     }
                // });
                this.checkedArr = tmp;
            },
        },
    });
</script>

试一试


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。