最近花了一點時間做了一個購物車案列，功能雖然沒多少，但是知識量和代碼量卻是滿滿的，直接上圖：

效果圖

三個部分

1. 頂部標題
2. 商品列表
3. 底部合計

頂部標題

頂部的標題沒什么好說的，左邊的是全選框，右邊的的是商品的 價格、數(shù)量、小計和編輯介紹。

全選框點擊后會把商品列表全部選上，底部的全選框也會勾選，如果取消其中一個商品的選擇，那全選框就會取消勾選，右邊的編輯則是點擊后會編成完成，商品列表中的“--”會變成”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
        },

還有之前發(fā)現(xiàn)的一點就是，在全選之后，又點掉其中一個，全選框取消勾選，然后你再點擊編輯，刪除你取消勾選的那一個，這樣子可以說是全部商品都勾選了，但是全選框卻不會選中，所以后來我在點擊刪除的時候會再一次遍歷商品是否全選中，是的話，全選框勾選。

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

后面說完會把全部代碼貼出來。