Vue实现简单购物车功能

// css
<style>
    html,body{margin: 0;padding: 0;}
    input,button{border: none;outline: none;text-align: center;background-color: #fff;box-shadow: none;}
    #shopcar table{width:1200px;max-width: 1200px;margin: 100px auto;font-size: 14px;line-height: 25px;text-align: center;border: 1px solid #e6e6e6;}
    #shopcar table tr,#shopcar table th,#shopcar table td{border: 1px #e6e6e6 solid;border-collapse: collapse;}
    #shopcar table tr,#shopcar table th{padding:10px 5px;}
    #shopcar table td{padding: 5px;}
    #shopcar table tbody input[type="text"]{width:50px;height: 25px;}
    #shopcar table tbody .default-btn > button{display: inline-block;padding: 0 30px;cursor: pointer;}
    #shopcar table .shop-result td > span{color: red;font-weight:bold;}
</style>

// html
<div id="shopcar">
    <table  border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th width="10%">商品序号</th>
                <th width="30%">商品名称</th>
                <th width="10%">商品单价</th>
                <th width="20%">商品数量</th>
                <th width="10%">商品总价</th>
                <th width="20%">商品备注</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in goodsList" :key="index">
                <td>{{ index+1 }}</td>
                <td>{{ item.goodsName }}</td>
                <td>{{ item.goodsPris }} <span>/元</span></td>
                <td class="default-btn">
                    <button @click="deleteNum(item)">-</button> 
                    <input type="text" readonly :value="item.goodsNums"> 
                    <button @click="addNum(item)">+</button>
                </td>
                <td>{{ item.goodsPris * item.goodsNums | formatMoney }} <span>元</span></td>
                <td>{{ item.goodsNote }}</td>
            </tr>
            <tr class="shop-result">
                <td colspan="3">共购买商品 <span>{{ count }}</span> 件</td>
                <td colspan="3">购物车总金额 <span>{{ total | formatMoney }}</span> 元</td>
            </tr>
            <tr v-if="goodsList.length == 0">
                <td colspan="6">暂时没有订单，<a href="https://jensonhui.top" target="_black">快去选购吧</a></td>
            </tr>
        </tbody>
    </table>
</div>

// js
<script>
    // 模拟json数据
    var List = [
        {
            goodsName : '洗发露',
            goodsPris : '66.66',
            goodsNums : '0',
            goodsTals : '0',
            goodsNote : '男士专用，限时打折促销款'
        },
        {
            goodsName : 'inponeX',
            goodsPris : '6200.00',
            goodsNums : '0',
            goodsTals : '0',
            goodsNote : '限时打折64G 银色 三网通用'
        },
        {
            goodsName : '米家激光投影电视 150英寸',
            goodsPris : '8999.00',
            goodsNums : '0',
            goodsTals : '0',
            goodsNote : '9折促销'
        },
        {
            goodsName : '米家激光投影电视 4K',
            goodsPris : '12999.00',
            goodsNums : '0',
            goodsTals : '0',
            goodsNote : '9折促销'
        }
    ]

    // 创建vue 实例
    new Vue({
        el : '#shopcar',
        data : {
            goodsList : List
        },
        filters : {
            // 四舍五入保留2位小数
            formatMoney : function (value){
                return value.toFixed(2);
            }
        },
        computed: {
            // 获取总订单数
            count : function () {
                var num = 0;
                for(var j in this.goodsList){
                    num += parseInt(this.goodsList[j].goodsNums);
                }
                return num;
            },
            // 获取总价格
            total : function () {
                var tal = 0;
                for(var i in this.goodsList){
                    tal += this.goodsList[i].goodsNums * this.goodsList[i].goodsPris;
                }
                return tal;
            }
        },
        methods: {
            // 添加数量
            addNum : function (goods) {
                var num = goods.goodsNums;
                num ++;
                goods.goodsNums = num;
            },
            // 删除数量
            deleteNum : function (goods) {
                var num = goods.goodsNums;
                num --;
                if( num < 0 ){
                    num = 0;
                }
                goods.goodsNums = num;
            }
        },
    })
</script>