Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第2章 Vue.js绑定样式及案例 2.5 简单版购物车案例

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第2章 Vue.js绑定样式及案例

2.5 简单版购物车案例

2.5.2 静态页面布局

<div id="app" v-cloak>
    <div class="header">购物车div>
    <table cellpadding="5" cellspacing="0">
        <tr>
            <td><input type="checkbox"/>td>
            <td><img src="images/p1.jpg"/>td>
            <td>五香瓜子<span>19span>td>
            <td>
                <button>-button>
                <input type="text" value="1"/>
                <button>+button>
            td>
        tr>

        <tr>
            <td><input type="checkbox"/>td>
            <td><img src="images/p1.jpg"/>td>
            <td>五香瓜子<span>19span>td>
            <td>
                <button>-button>
                <input type="text" value="1"/>
                <button>+button>
            td>
        tr>

        <tr>
            <td><input type="checkbox"/>td>
            <td><img src="images/p1.jpg"/>td>
            <td>五香瓜子<span>19span>td>
            <td>
                <button>-button>
                <input type="text" value="1"/>
                <button>+button>
                <button>删除button>
            td>
        tr>
    table>

    <div class="footer">
        <input type="checkbox"/>全选
        <i>总数量：100i>
        <i>总价：1000i>
    div>

div>
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

没有CSS文件，将就着看吧，重要的是实现逻辑

2.5.3 渲染购物车列表

data: {
    msg: "Hello world",
    active: 0,
    //模拟购物车数据
    cartlist: [
        {
            id: 1,
            imgurl: 'https://cdn.pixabay.com/photo/2016/01/05/13/58/apple-1122537__480.jpg',
            title: '苹果',
            price: 30,
            num: 1,
            check: true //记录是否选中
        },
        {
            id: 2,
            imgurl: 'https://cdn.pixabay.com/photo/2016/11/22/21/59/peanuts-1850809__480.jpg',
            title: '花生',
            price: 30,
            num: 1,
            check: false //记录是否选中
        },
        {
            id: 3,
            imgurl: 'https://cdn.pixabay.com/photo/2017/01/10/19/05/watermelon-1969949__480.jpg',
            title: '西瓜',
            price: 30,
            num: 2,
            check: false //记录是否选中
        },
    ]
},
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

<table cellpadding="5" cellspacing="0">
    <tr v-for="(item,i) in cartlist" :key="i">
        <td v-if="item.check"><input type="checkbox" checked/>td>
        <td><img :src="item.imgurl"/>td>
        <td>{{item.title}}<span>{{item.price}}span>td>
        <td>
            <button>-button>
            <input type="text" :value="item.num"/>
            <button>+button>
        td>
    tr>
table>
1
2
3
4
5
6
7
8
9
10
11
12

2.5.4 修改商品选中状态

methods: {
    checkbtn(i){
        console.log(this.cartlist[i])
        this.cartlist[i].check = !this.cartlist[i].check
    }
}
1
2
3
4
5
6

2.5.5 记录选中商品的总数量和总价格

methods: {
    checkbtn(i){
        console.log(this.cartlist[i])
        this.cartlist[i].check = !this.cartlist[i].check
        this.getAllNum()
        this.getAllPrice()
    },
    getAllNum(){
        var num = 0
        for(var i = 0 ; i < this.cartlist.length ;i++){
            if (this.cartlist[i].check == true){
                num += parseInt(this.cartlist[i].num)
            }
        }
        this.allNum = num
    },
    getAllPrice(){
        var num = 0
        for(var i = 0 ; i < this.cartlist.length ; i++){
            if (this.cartlist[i].check == true){
                num += parseInt(this.cartlist[i].num) * this.cartlist[i].price
            }
        }
        this.allPrice = num
    }
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

2.5.6 全选状态

1. 状态1：选中所有商品
2. 状态2：选中底部的全选复选框

getAllCheck(){
    var num = 0
    for(var i = 0 ; i < this.cartlist.length ; i ++){
        if (this.cartlist[i].check == true){
            num ++
        }
    }
    this.allCheck = num
}
1
2
3
4
5
6
7
8
9

状态2

allCheckbtn(e){
    //判断全选复选框是否选中
    console.log(e.target.checked)
    if (e.target.checked){
        for(var i = 0 ; i < this.cartlist.length ; i ++){
            this.cartlist[i].check = true
        }
        this.getAllNum()
        this.getAllPrice()
    }
    else{
        for(var i = 0 ; i < this.cartlist.length ; i ++){
            this.cartlist[i].check = false
        }
        this.getAllNum()
        this.getAllPrice()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.5.7 商品数量增加或减少

【完整代码】

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>简单版购物车实例title>
    <link rel="stylesheet" href="css/style.css">

    <style>
        img {
            width: 200px;
            height: 150px;
        }
    style>

head>
<body>

<div id="app" v-cloak>
    <div class="header">购物车div>
    <table cellpadding="5" cellspacing="0">
        <tr v-for="(item,i) in cartlist" :key="i">
            <td v-if="item.check"><input type="checkbox" checked @click="checkbtn(i)"/>td>
            <td v-else><input type="checkbox" @click="checkbtn(i)"/>td>
            <td><img :src="item.imgurl"/>td>
            <td>{{item.title}}<span>{{item.price}}span>td>
            <td>
                <button @click="min(i)">-button>
                <input type="text" :value="item.num"/>
                <button @click="add(i)">+button>
            td>
        tr>
    table>

    <div class="footer">
        <em v-if="allCheck==cartlist.length">
            <input type="checkbox" checked @click="allCheckbtn"/>全选
        em>
        <em v-else>
            <input type="checkbox" @click="allCheckbtn"/>全选
        em>
        <i>总数量：{{allNum}}i>
        <i>总价：{{allPrice}}i>
    div>

div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "Hello world",
            active: 0,
            //模拟购物车数据
            allCheck : 0, //选中总条数
            allPrice : 0,
            allNum : 0,
            cartlist: [
                {
                    id: 1,
                    imgurl: 'https://cdn.pixabay.com/photo/2016/01/05/13/58/apple-1122537__480.jpg',
                    title: '苹果',
                    price: 30,
                    num: 1,
                    check: true //记录是否选中
                },
                {
                    id: 2,
                    imgurl: 'https://cdn.pixabay.com/photo/2016/11/22/21/59/peanuts-1850809__480.jpg',
                    title: '花生',
                    price: 10,
                    num: 1,
                    check: false //记录是否选中
                },
                {
                    id: 3,
                    imgurl: 'https://cdn.pixabay.com/photo/2017/01/10/19/05/watermelon-1969949__480.jpg',
                    title: '西瓜',
                    price: 50,
                    num: 2,
                    check: false //记录是否选中
                },
            ]
        },
        methods: {
            checkbtn(i){
                console.log(this.cartlist[i])
                this.cartlist[i].check = !this.cartlist[i].check
                this.getAllNum()
                this.getAllPrice()
                this.getAllCheck()
            },
            getAllNum(){
                var num = 0
                for(var i = 0 ; i < this.cartlist.length ;i++){
                    if (this.cartlist[i].check == true){
                        num += parseInt(this.cartlist[i].num)
                    }
                }
                this.allNum = num
            },
            getAllPrice(){
                var num = 0
                for(var i = 0 ; i < this.cartlist.length ; i++){
                    if (this.cartlist[i].check == true){
                        num += parseInt(this.cartlist[i].num) * this.cartlist[i].price
                    }
                }
                this.allPrice = num
            },
            getAllCheck(){
                var num = 0
                for(var i = 0 ; i < this.cartlist.length ; i ++){
                    if (this.cartlist[i].check == true){
                        num ++
                    }
                }
                this.allCheck = num
            },
            allCheckbtn(e){
                //判断全选复选框是否选中
                console.log(e.target.checked)
                if (e.target.checked){
                    for(var i = 0 ; i < this.cartlist.length ; i ++){
                        this.cartlist[i].check = true
                    }
                    this.getAllNum()
                    this.getAllPrice()
                }
                else{
                    for(var i = 0 ; i < this.cartlist.length ; i ++){
                        this.cartlist[i].check = false
                    }
                    this.getAllNum()
                    this.getAllPrice()
                }
            },
            add(i){
                this.cartlist[i].num ++
                this.getAllNum()
                this.getAllPrice()
            },
            min(i){
                if (this.cartlist[i].num == 1){
                    return
                }
                this.cartlist[i].num --
                this.getAllNum()
                this.getAllPrice()
            }
        }
    })
script>
body>
html>
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

运行效果

但是哈，我发现这样是有个bug的，

就是选中状态没变，判断的时候是正确的，视图层的问题…