Vue案例：商品购物车（一）

最近花了一点时间做了一个购物车案列，功能虽然没多少，但是知识量和代码量却是满满的，直接上图：

效果图

三个部分

1. 顶部标题
2. 商品列表
3. 底部合计

顶部标题

顶部的标题没什么好说的，左边的是全选框，右边的的是商品的 价格、数量、小计和编辑介绍。

全选框点击后会把商品列表全部选上，底部的全选框也会勾选，如果取消其中一个商品的选择，那全选框就会取消勾选，右边的编辑则是点击后会编成完成，商品列表中的“--”会变成”X“，点击后会删除这个商品。

全选

取消勾选

        //全选
        allCheck() {
            this.all = !this.all
            this.Commodity.forEach(p => {
                p.decide = this.all
            })
        },
        //勾选商品
        decideCheck(i) {
            if (i !== '') {
                this.Commodity[i].decide = !this.Commodity[i].decide
            }
            //检测商品是否全部选中
            for (let index = 0; index < this.Commodity.length; index++) {
                if (this.Commodity[index].decide === false) {
                    this.all = false
                    return
                }
            }
            this.all = true
        },

还有之前发现的一点就是，在全选之后，又点掉其中一个，全选框取消勾选，然后你再点击编辑，删除你取消勾选的那一个，这样子可以说是全部商品都勾选了，但是全选框却不会选中，所以后来我在点击删除的时候会再一次遍历商品是否全选中，是的话，全选框勾选。

        //删除其中的某一个商品
        deleteLi(i) {
            this.Commodity.splice(i, 1)
            this.decideCheck('')
        },

后面说完会把全部代码贴出来。