使用vue实现的一个简易的购物车

172 阅读 0 评论 114 点赞

我是靠谱客的博主孝顺大门，这篇文章主要介绍使用vue实现的一个简易的购物车，现在分享给大家，希望可以做个参考。

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>手机购物车</title>
    <style type="text/css">

table {
            width: 1000px;
            height: 200px;
            text-align: center;
            font-size: 12px;
            border-collapse: collapse;
        }

table thead {
            height: 30px;
            background-color: #CCCCCC;
            opacity: 0.5;
        }

table tbody {
            background: #D3D3D4;
        }

.zj {
            text-align: center;
            font-size: 30px;
        }

</style>
</head>

<body>
<div id="app">
    <table border="1" cellspacing="1" cellpadding="1" align="center">
        <thead>
        <tr>
            <th></th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(value,index) in phones">
            <td>{{value.id}}</td>
            <td>{{value.phone}}</td>
            <td>{{value.price | singlePrice}}</td>
            <td>
                <button @click="decrement(index)" v-bind:disabled="value.count<=0">-</button>
                {{value.count}}
                <button @click="increment(index)">+</button>
            </td>
            <td>
                <button @click="del(index)">移除</button>
            </td>

</tr>
        <tr>
            <td>总价格：</td>
            <td colspan="4" class="zj">总计价格：{{getTotalprice()}}</td>
        </tr>

</tbody>
    </table>

</div>
</body>

//计算总价
                getTotalprice() {
                    var sum = 0;
                    for (let i = 0; i < this.phones.length; i++) {
                        sum += this.phones[i].price * this.phones[i].count;
                    }

return '￥' + sum.toFixed(2);
                }

},
    })
</script>
</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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>手机购物车</title>
    <style type="text/css">

        table {
            width: 1000px;
            height: 200px;
            text-align: center;
            font-size: 12px;
            border-collapse: collapse;
        }

        table thead {
            height: 30px;
            background-color: #CCCCCC;
            opacity: 0.5;
        }

        table tbody {
            background: #D3D3D4;
        }

        .zj {
            text-align: center;
            font-size: 30px;
        }

    </style>
</head>


<body>
<div id="app">
    <table border="1" cellspacing="1" cellpadding="1" align="center">
        <thead>
        <tr>
            <th></th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(value,index) in phones">
            <td>{{value.id}}</td>
            <td>{{value.phone}}</td>
            <td>{{value.price | singlePrice}}</td>
            <td>
                <button @click="decrement(index)" v-bind:disabled="value.count<=0">-</button>
                {{value.count}}
                <button @click="increment(index)">+</button>
            </td>
            <td>
                <button @click="del(index)">移除</button>
            </td>

        </tr>
        <tr>
            <td>总价格：</td>
            <td colspan="4" class="zj">总计价格：{{getTotalprice()}}</td>
        </tr>

        </tbody>
    </table>

</div>
</body>

<script src="vue.min.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data: {
            phones: [{
                id: 1,
                phone: '华为mate30',
                price: 3465.00,
                count: 0,
            },
                {
                    id: 2,
                    phone: '华为mate40',
                    price: 4166.00,
                    count: 0
                },
                {
                    id: 3,
                    phone: '苹果12',
                    price: 7500.00,
                    count: 0
                },
                {
                    id: 4,
                    phone: 'OPPO',
                    price: 2180.00,
                    count: 0
                }
            ]
        },
        methods:
            {
                //按钮加
                increment(index)
                {
                    this.phones[index].count++;
                },
                //按钮减
                decrement(index)
                {
                    this.phones[index].count--;
                },
                //按钮删除
                del(index) {
                    this.phones.splice(index, 1);
                },

                //计算总价
                getTotalprice() {
                    var sum = 0;
                    for (let i = 0; i < this.phones.length; i++) {
                        sum += this.phones[i].price * this.phones[i].count;
                    }

                    return '￥' + sum.toFixed(2);
                }

            },
    })
</script>
</html>