vue实现简单的购物车功能

请看代码:

<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"
                        @change="isCheckedAll"
                    />
                    商品id:{{item.id}}&emsp;&emsp;
                    商品名称:{{item.name}}&emsp;&emsp;
                    商品单价:{{item.price}}&emsp;&emsp; 商品数量:<button
                        @click="decr(index,item)"
                    >
                        -</button
                    >{{item.num}}<button @click="incr(index,item)">+</button
                    >&emsp;&emsp; 商品小计:{{item.price * item.num}}
                </li>
            </ul>
        </div>
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) {
                        // 短路运算
                        // confirm("这么好的商品你确认就不买了吗?") &&
                        //     this.cartData.splice(index, 1)
                        if (confirm("这么好的商品你确认就不买了吗?")) {
                            this.cartData.splice(index, 1);
							//选中返回0 不选中返回-1
                            let key = this.checkedArr.indexOf(item.id);
							console.log(key)
							
							//如果不是-1证明有
                            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

                    // if (this.checkedArr.length === this.cartData.length) {
                    //     this.isCheckAll = true;
                    // } else {
                    //     this.isCheckAll = 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;
                },
            },
        });
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值