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

315 阅读 0 评论 208 点赞

我是靠谱客的博主孝顺大门，这篇文章主要介绍使用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>

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