vue实现购物车功能

     随着时代发展，网购成了人们必不可少的一部分，所以我们常常遇到要实现购物车功能，如下图，我们来分析一下 下图所示页面:

    首先，我们通过ElementUI中的<el-table>标签来实现页面的呈现。

    其次，我们可以看到“价格”列和“总价”是由"￥"+价格 组成，并且价格要**保留两位小数**

** **第三，“购买数量” 点击‘-’号按钮时不能小于1

    第四，当所有商品都被移除时，显示‘购物车为空’

购物车有数据时：

** 购物车无数据时：**

     在代码中，我们利用了过滤器来实现“价格”和‘总价’的拼接，通过toFixed()方法实现保留两位小数，通过disabled属性来实现当数量小于等于1时，不再进行数量减法，通过计算属性computed来实现总价的计算，通过splice()方法来实现移除功能。下面让我们上代码：

<template>
    <div>
        <h1>购物车</h1>
        <div v-if="tableData.length">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" width="50" align="center" header-                
                 align="center">
                </el-table-column>
                <el-table-column prop="name" label="书籍名称" width="180" align="center" 
                header-align="center">
                </el-table-column>
                <el-table-column prop="press" label="出版社" width="180" align="center" 
                header-align="center">
                </el-table-column>
                <el-table-column prop="price" label="价格" width="180" align="center" 
                header-align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.price | showPrice}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="count" label="购买数量" width="180" align="center" 
                header-align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center;justify-content: 
                        center;">
                            <el-button size="small" @click="decrement(scope.$index)" 
                            :disabled="scope.row.count <= 1">-</el-button>
                            <div style="width: 50px;">{{scope.row.count}}</div>
                            <el-button size="small" type="primary" 
                            @click="increment(scope.$index)">+</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" align="center" header- 
                align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" size="small" 
                         @click="removeHandle(scope.$index)">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <h2>总计：{{totalPrice | showPrice}}</h2>
        </div>
        <div v-else>购物车为空</div>  
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        name:'《C Primer Plus》',
                        press:'人民邮电出版社',
                        price:155.00,
                        count:1
                    },
                    {
                        name:'《计算机系统基础》',
                        press:'机械工业出版社',
                        price:100.00,
                        count:1
                    },
                    {
                        name:'《深入浅出Vue.js》',
                        press:'人民邮电出版社',
                        price:200.00,
                        count:1
                    },
                    {
                        name:'《算法》',
                        press:'人民邮电出版社',
                        price:250.00,
                        count:1
                    }
                    
                ],
            }
        },
        computed: {
            totalPrice() { //计算总价
                let total = 0;
                for(let i in this.tableData){
                    total += this.tableData[i].price * this.tableData[i].count;
                }
                return total
            }
        },
        filters:{ //过滤器
            // 拼接价格/总价  
            showPrice(price){
                return '￥'+ price.toFixed(2);
            }
        },
        methods: {
            increment(index){//加
                this.tableData[index].count++
            },
            decrement(index){//减
                this.tableData[index].count--
            },
            removeHandle(index){//移除
                this.tableData.splice(index,1);
            }
        }
    }
</script>