vue实现简单的购物车案例

业务需求

1. 将数据库里的内容渲染到页面上
2. 点击删除，删除对应的商品栏
3. 点击加号、减号，增加减少商品数量，并且计算出单件商品的总价
4. 点击商品的选择框的同时，计算出商品总数，以及商品的总价
5. 当所有商品都被选中的时候，顶部的全选中会被选中，但是只要有一个商品没有被选中，全选框就取消选中
6. 点击全选框，选中所有商品，当全选框取消全选时，所有商品取消选中

编写流程

1. 先写出静态布局，商品的框子只要写出一个即可，用v-for将数据渲染出来即可
2. 其中单件商品总价为商品数量*商品单价
3. 编写点击删除的按钮，删除按钮绑定点击事件，删除对应的数据
4. 点击加号减号绑定点击事件，分别增加减少商品数量
5. 编写商品总数，创建计算属性，遍历数据列表，判断被选中的商品的数量
6. 编写全选框，创建计算属性，当判断商品是否全部选中来控制全选按钮时，使用get方法，当通过点击全选按钮，让商品进行选中时，使用set方法

---

案例需要引入vue.js，使用时自行引入

html代码：

    <div id="app">
        全选<input type="checkbox" v-model="totalCheck">
        <hr>
        <ul>
            <li v-for="(r,i) in dataList">
                <input type="checkbox" v-model="r.choose">
                --标题：{{r.name}}
                --价格: {{r.price}}
                --数量：<button @click="reduce(i)">-</button> <input type="number" v-model="r.num" min="0"> <button
                    @click="add(i)">+</button>
                --单件商品总价：{{r.num*r.price}}
                -- <button @click="del(i)">删除</button>
            </li>
        </ul>
        <hr>
        <p>当前选中<span v-text="totalNum" class="totalNum"></span>件商品</p>
        <hr>
        <p>当前购物车总价：<span class="totalNum">{{totalPrice}}</span></p>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

js代码

 new Vue({
            el: '#app',
            data() {
                return {
                    // 数据列表
                    dataList: [
                        {
                            name: "华为P50 Pro",
                            price: 9000,
                            num: 1,
                            choose:false   // 判断是否选中

                        },
                        {
                            name: "小米11尊享版",
                            price: 5000,
                            num: 1,
                            choose:false

                        },
                        {
                            name: "Vivo X60s",
                            price: 4000,
                            num: 1,
                            choose:true

                        },
                    ],
                }
            },
            methods: {
                reduce(e) {   // 点击减号
                    if (this.dataList[e].num)   // 控制商品数量不为负数
                        this.dataList[e].num--;
                },
                add(e) {    // 点击加号
                    this.dataList[e].num++;
                },
                del(e){    // 点击删除
                    this.dataList.splice(e,1)
                }
            },
            computed:{     // 计算属性
                totalNum(){    // 选中商品的数量
                    let arr=this.dataList.filter(r=>{
                        return r.choose==true;     // 查找选择框被选中的商品,并将它们返回给数组arr
                    });
                    console.log(arr.length);
                    return arr.length;     // 选中商品的数量就等于arr的长度
                },
                totalCheck:{     // 全选按钮
                    get(){      // 通过商品的选择框控制全选的框子
                        if(this.totalNum==this.dataList.length){    // 当选中商品的数量等于商品的总数量是，表示商品被全选了
                            return true;    // 全选框选中 
                        }else{
                            return false;   // 全选框未选中
                        }
                    },
                    set(e){     // 操作全选框，改变所有商品的选中情况
                        console.log(e);   // totalCheck 的值
                        if(e){    // 如果totalCheck的值为true  就表示全选的框子被选中了，就要进行以下的操作
                            this.dataList.map(r=>{
                                return r.choose=true;   // 让购物车的每一项都选中
                            })
                        }else{      // 全选框没有被选中
                            this.dataList.map(r=>{
                                return r.choose=false;   // 购物车的每一项都未选中
                            })
                        }
                    }
                },
                totalPrice(){   // 总价
                    let sum=0;
                    this.dataList.forEach(r=>{
                        if(r.choose){       // 判断商品是否被选中
                            sum+=r.price*r.num;     // 总价等于选中商品的数量*选中商品的价格
                        }
                    })
                    return sum;
                }
            },
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

css代码

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            width: 40px;
            text-align: center;
        }
        .totalNum{
            font-size: 22px;
            color: #f00;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13