Vue 购物车

by deniro

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <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><input id="checkAll" type="checkbox" class="checkAll" @click="checkAllOrNot($event)"></th>
                <th>序号</th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list">
                <td><input type="checkbox" class="checkItem" @click="checkItem($event,index)"></td>
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="reduceCount(index)" :disabled="item.count===1">-</button>
                    {{item.count}}
                    <button @click="addCount(index)">+</button>
                </td>
                <td>
                    <button @click="remove(index)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div>总价：￥{{totalPrice}}</div>
    </template>
    <!--当购物车为空时，则提示-->
    <div v-else>购物车内暂时没有商品</div>
</div>


<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="index.js"></script>
</body>
</html>

CSS

[v-cloak] {
    display: none;
}

table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}



th {
    font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA;
}

td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #fff;
    font-size:14px;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}

Vue

var app = new Vue({
    el: '#app',
    data: {
        /**
         * 购物车中的商品列表
         */
        list: [
            {
                id: 1,
                name: '韩国进口海牌海苔',
                price: 39.9,
                count: 1
            },
            {
                id: 2,
                name: '印尼进口 Nabati 丽巧克（Richoco）休闲零食 巧克力味 威化饼干',
                price: 11.8,
                count: 1
            },
            {
                id: 3,
                name: '菲律宾进口 道吉草 奶油夹',
                price: 6.5,
                count: 1
            }
        ],
        //选中的商品列表，用于计算总价
        checkList: []
    },
    mounted: function () {
        //默认全选
        this.checkAll();
        this.checkAllElement(document.querySelector(".checkAll"));
    },
    computed: {
        /**
         * 总价
         * @returns {string}
         */
        totalPrice: function () {
            var total = 0;
            for (var i = 0; i < this.checkList.length; i++) {
                var item = this.checkList[i];
                total += item.price * item.count;
            }
            return total.toLocaleString();
        }
    },
    methods: {
        /**
         * 减少购买数量
         * @param index
         */
        reduceCount: function (index) {
            if (this.list[index].count === 1) return;
            this.list[index].count--;
        },
        /**
         * 增加购买数量
         * @param index
         */
        addCount: function (index) {
            this.list[index].count++;
        },
        /**
         * 移除商品
         * @param index
         */
        remove: function (index) {
            console.log("remove-index:" + index);
            this.list.splice(index, 1);

            //获取商品序号
            var id = index + 1;
            //移除实际参与计算的商品
            var $checkList = this.checkList;
            for (var i = 0; i < $checkList.length; i++) {
                var item = $checkList[i];
                if (item.id == id) {
                   ...