购物车-plat2

通过自定义指令判断输入内容是否小于1

通过计算属性计算总价

通过监听器判断是否全选

<div id="app">
    <ul>
        <!-- 单个复选框的情形 -->
        <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" />
            商品id：{{item.id}}  
            商品名称：{{item.name}}  
            商品单价：{{item.price}}   
            商品数量：
            <button @click="decr(index,item)">-</button>
            <input type="text" v-yanzheng="index" v-model="item.num" style="width: 15px" maxlength="2"/>
            <button @click="incr(index,item)">+</button>
              商品小计：{{item.price * item.num}}
        </li>
        总价：￥ {{getTotalPrice}} 元
    </ul>
</div>
<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,},
    ];
    Vue.directive("yanzheng", {
        update: function (el,binding) {
            if (el.value < 1) {
                cartData[binding.value].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);
                    });
                }
            },
            // 反选
            antiSelect: function () {
                // 循环整个商品列表
                let tmp = [];
                this.cartData.forEach((el) => {
                    // 表示在arr中判断是否包含el，如果包含则返回true，否则返回false
                    if (!this.checkedArr.includes(el.id)) {
                        // 说明么有，则要
                        tmp.push(el.id);
                    }
                });
                this.checkedArr = tmp;
            },
        },
        watch: {
            // 监听选中商品的数量的变化
            checkedArr: function (newVal, oldVal) {
                this.isCheckAll =
                    this.checkedArr.length === this.cartData.length;
            },
        },
        computed: {
            getTotalPrice: function () {
                let total = 0;
                // 循环商品列表
                this.cartData.forEach((el) => {
                    // 判断是否需要计算价格
                    if (this.checkedArr.includes(el.id)) {
                        total += el.price * el.num;
                    }
                });
                // 返回总价
                return total;
            },
        },
    });
</script>

试一试