用Vue写购物车用vue的购物车小例子展示： Html部分代码： JS部分 index.js }); css 部分

vue的购物车小例子

展示：图片标题

Html部分代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="app" v-cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item, index) in list">
                        <td>{{ index + 1 }}</td>
                        <td> {{item.name}}</td>
                        <td>{{ item.price }}</td>
                        <td>
                            <button
                                @click="handleReduce(index)"
                                :disabled="item.count === 1"
                            >
                                -
                            </button>
                            {{item.count}}
                            <button @click="handleRemove(index)">移除</button>
                        </td>
                    </tr>
                </thead>
            </table>
            <div>总价： $ {{ totalPrice }}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="index.js"></script>
</body>

JS部分 index.js

var app = new Vue({
el: '#app',
data: { 
    list: [
        {
            id: 1,
            name: 'iPhone 7',
            price: 6188,
            count: 3
        },
        {
            id: 2,
            name: 'iPad Pro',
            price: 5888,
            count: 1
        }, 
        {
            id: 3,
            name: 'MacBook Pro',
            price: 21488,
            count: 1
        }
    ]
},
computed: {
    totalPrice: function () {
        var total = 0;
        for(var i =0; i< this.list.length; i++ ) {
            var item = this.list[i];
            total += item.price * item.count;
        }
        return total.toString().replace(/\B(?=(\d{3})+$)/g,'')
    }
},
methods: {
    handleReduce: function (index) {
        if(this.list[index].count === 1) return;
        this.list[index].count--;
    },
    handleAdd: function (index) {
        this.list[index].count++;
    },
    handleRemove: function (index) {
        this.list.splice(index,1)
    }
}

});

css 部分

[v-cloak] {
    display: none
}

table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
th, td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}
th {
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
}