vue 购物车demo 用到了计算属性computed v-for @click

原文：https://blog.csdn.net/qq_36407748/article/details/80148514?utm_source=blogxgwz0

template模板

<template>
    <div class="two">
        <table border="1px solid #666" style="width:500px;">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(shop,index) in shoplist" :key="index">
                    <td>{{shop.id}}</td>
                    <td>{{shop.name}}</td>
                    <td>{{shop.price}}</td>
                    <td>
                        <button @click="reduce(shop)" :disabled="shop.count===1">-</button>
                        {{shop.count}}
                        <button @click="add(shop)">+</button>
                    </td>
                    <td>
                        <button @click="remove(index)">移除</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>总价：</td>
                    <td colspan="5">￥{{totalCount}}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>

script代码段

<script>
    export default {
        data(){
            return{
                // 模拟数据
                shoplist:[
                    {id:1,name:'phone7',price:2000,count:1},
                    {id:2,name:'phone8',price:1000,count:1},
                    {id:3,name:'phone6',price:3000,count:1},
                    {id:4,name:'phone9',price:1500,count:1},
                ]
            }
        },
        computed:{
            // 计算商品总价
            totalCount(){
                let totalprice = 0;
                // for(let i = 0; i < this.shoplist.length; i++){
                //     let item = this.shoplist[i]
                //     console.log(item)
                //     totalprice +=item.price * item.count
                // }
                // 遍历拿到每一个商品对象的价格 和 数量，然后把乘积返回 
                this.shoplist.forEach(a =>{
                    totalprice += a.price * a.count
                })
                return totalprice;  
            }
        },
        //方法
        methods:{
            // 商品数量--的操作函数
            reduce(shop){
                // 判断 如果数量为1时，不让数量再减
                if(shop.count===1) return;
                //  否则的话就每次点击减1
                shop.count--
            },
            // 反之，加加操作就简单了 ，直接把数量点击加1就行了
            add(shop){
                // console.log(index)
                shop.count++
                // this.shoplist[index].count++
            },
            //删除按钮，因为是练习模拟一下，真实项目需要点击删除的时候获取商品的id，然后传到后台的接口进行删除
            remove(index){
                this.shoplist.splice(index,1)
            }
        }
    }
</script>

样式，很简单，很丑 ，自己用ui框架的表格 修饰哈

table tr{
    text-align: center;
}