购物车的项目其实主要就是写红框里面的内容，也就是购买，删除和总金额的计算以及对input框值的事件监听效果。

首先静态处理：看出来都是一样的循序处理，所以直接使用vue使用的v-for循环进行写即可。

动态绑定即js的写法：因为我是写完了以后自己又重新写的，所以我就自己写的内容分开来说，主要讲比较简单易懂的但是代码量多的这种方法（第三种）

第一种方法：使用深度监听

            watch:{
                buysp:{
                    handler(){
                        this.allmon();
                    },
                    deep:true,
                },
            },

运用了这种深度监听的方法的话当buysp这个素组发生改变的时候就能监听到，这样一来input框改变的时候就可以使用了，而且input框的双向绑定可以直接绑定数组里面的值，比较方便

第二种方法：使用computed属性

使用computed计算属性，将input绑定到计算属性的方法，当input值改变的时候，计算属性也会监听到，方法的话类似于深度监听，只不过监听的方法的话要写到计算属性里面去。

第三种方法：input绑定一个数组，数组里面放的是数量

使用这种方法的话比较麻烦一点，因为这样一来使用添加方法的时候就必须要找到当前下标赋值给数组，然后改变当前数组的下标的值，说起来有点绕，直接上代码：

1.添加的方法

                 add(dj){
                    for(var i of this.buysp){
                        if(dj.name==i.name){
                            this.boole=true;
                            i.number=parseInt(i.number)+1;
                            var index=this.buysp.map(function(a,b,c){
                                return a.name;
                            }).indexOf(i.name);
                            console.log(i.number)
                            vm.$set(vm.number,index,i.number);
                            console.log(this.number);
                            break;
                        }else{
                            this.boole=false;
                        }
                    }
                    if(!this.boole){
                        this.buysp.push({"name":dj.name,"score":dj.newm*10,"oldm":dj.oldm,"newm":dj.newm,"number":1});
                        this.number.push(1);
                    }
                }

因为要先判断这本书有没有出现如果出现的话是不在添加的而是直接就增加数量即可，这样一来的话就需要一个布尔值来接受判断，当已经有的时候就需要获取你点击的那个在购物数组里面的下标，这里我用的是数组的map方法来遍历出name数组，然后在通过indexof来获取下标，然后改变下标的值的话因为vue的关系，要使用set方法或者原生的js的splice的方法来改变，大致添加就是这些了

2.删除

通过获取的下标直接删除即可，不过第三种方法的话删除的时候还需要将数组里面的值删除，上代码：

                remove(index){
                    this.buysp.splice(index,1);
                    this.number.splice(index,1);
                },

3.金额计算

这个计算的话是需要事件监听的，运用深度监听或者computed属性的话直接就可以实行

              allmon(){
                    var m=0;
                    var s=0;
                    var q=0;
                    for(var i of this.buysp){
                        for(var k in this.buysp){
                            if(this.number[k]==""||this.number[k]==null){
                                continue;
                            };
                            if(i==this.buysp[k]){
                                m+=i.newm*parseInt(this.number[k]);
                                s+=(i.oldm-i.newm)*parseInt(this.number[k]);
                                q+=i.score*parseInt(this.number[k]);
                            }
                        }
                    }
                    this.allm=m.toFixed(1);
                    this.saves=s.toFixed(1);
                    this.sco=q.toFixed(1);
                },