纯前端vue处理购物车思路方法

<div id="app" v-cloak>
        <div class="Zenobia_i_banner"></div>
        <div class="Zenobia_i_alone" v-for="item,index in list">
            <div class="iconfont iconyi" v-if="item.ischeck" @click="select(item.id,index,false,item.nums,item.price,item.total)"></div>
            <div class="iconfont iconwei" v-else @click="select(item.id,index,true,item.nums,item.price,item.total)"></div>
            <div class="Zenobia_i_alone_caipin">
                <img class="Zenobia_i_alone_caipin_pic" :src="Zenobia_Url+item.pic" @click="showPic(Zenobia_Url+item.pic)">
                <div class="Zenobia_i_alone_caipin_info">
                    <div class="Zenobia_i_alone_caipin_info_title">{{item.name}}</div>
                    <div class="Zenobia_i_alone_caipin_info_box">
                        <div class="Zenobia_i_alone_caipin_info_box_price">${{item.price}}</div>
                        <div class="Zenobia_i_alone_caipin_info_box_nums">
                            <div class="iconfont iconjian" @click="cutNums(index,item.nums,item.price)"></div>
                            <input type="text" v-model="item.nums">
                            <div class="iconfont iconjia" @click="addNums(index,item.nums,item.price)"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Zenobia_i_bottom">
            <div class="Zenobia_i_bottom_left" @click="quanxuan">
                <div class="iconfont iconyi" v-if="isquanxuan"></div>
                <div class="iconfont iconwei" v-else></div>
                <div class="Zenobia_i_bottom_left_text">全选</div>
            </div>
            <div class="Zenobia_i_bottom_right">
                <div class="Zenobia_i_bottom_right_price">${{price}}</div>
                <button class="Zenobia_i_bottom_right_btn" type="button" @click="titjiao">提交订单</button>
            </div>
        </div>
    </div>

                data: {
                    list: [{
                        "id": 1,
                        "name": "Sweet and sour fillet of pork",//商品名称
                        "pic": "/public/uploads/images/pics/1.jpg",//商品图片
                        "price": 100,//商品价格
                        "ischeck": false,//默认未选择
                        "nums": 1,//默认数量1
                        "total": 100//先默认单品合计等于单价
                    }, {
                        "id": 2,
                        "name": "Braised Prawns",
                        "pic": "/public/uploads/images/pics/2.jpg",
                        "price": 50,
                        "ischeck": false,
                        "nums": 1,
                        "total": 50
                    }],
                    goods: [],//选中商品数组
                    price: 0,//合计
                    isquanxuan: false,//是否全选

                },        
                methods: {
                    addNums: function(index, nums, price) {
                        var that = this;
                        that.list[index].nums++;
                        that.list[index].total = that.list[index].total + price
                        if (that.list[index].ischeck) {
                            that.price = that.price + price
                        }
                    },
                    cutNums: function(index, nums, price) {
                        var that = this;
                        if (nums == 1) {
                            return
                        }
                        that.list[index].nums--;
                        that.list[index].total = that.list[index].total - price;
                        if (that.list[index].ischeck) {
                            that.price = that.price - price;
                        }
                    },
                    quanxuan: function() {
                        var that = this;
                        //每次点击全选时选中数组先清空，合计清零
                        that.goods = [];
                        that.price = 0;
                        if (that.isquanxuan) {//取消全选
                            that.isquanxuan = false;
                            for (var i in that.list) {
                                that.list[i].ischeck = false;//所有全部
                            }
                        } else {//点击全选
                            that.isquanxuan = true;
                            for (var i in that.list) {
                                that.list[i].ischeck = true;
                                that.price = that.price + that.list[i].total;//计算合计
                                var goods = {
                                    id: that.list[i].id,
                                    nums: that.list[i].nums,
                                    price: that.list[i].price,
                                    total: that.list[i].total
                                }
                                that.goods.push(goods);//把选中的重新插入到数组中
                            }
                        }
                        console.log(JSON.stringify(that.goods))
                    },
                    select: function(id, index, ischeck, nums, price, total) {
                        var that = this;
                        that.list[index].ischeck = ischeck;
                        console.log(JSON.stringify(that.goods))
                        if (ischeck) {
                            that.price = that.price + parseInt(total);
                            for (var i in that.goods) {
                                if (that.goods[i].id == id) {
                                    that.goods[i].nums = that.goods[i].nums + nums
                                    that.goods[i].total = that.goods[i].total + total
                                    return
                                }
                            }
                            var goods = {
                                id: id,
                                nums: nums,
                                price: price,
                                total: total
                            }
                            that.goods.push(goods);
                        } else {
                            that.price = that.price - parseInt(total);
                            for (var i in that.goods) {
                                if (that.goods[i].id == id) {
                                    that.goods.splice(i, 1)
                                }
                            }
                        }
                    },
                 }