vue实现购物车

使用vue.js完成购物车的编写，可以增加数量，移除某个对象，总金额也会随之发生改变。

index.html:

    
        
        
        
    
    
        

            
            

购物车为空

    
        

        
        
    

cart.js:

var app=new Vue({
    el:'#app',
    data:{
        list:[{
            id:1,
            name:'iphone 7',
            price:6888,
            count:1
        },{
            id:2,
            name:'iVIVO x27',
            price:3888,
            count:2
        },{
            id:3,
            name:'iphone 8',
            price:8888,
            count:10
        },{
            id:4,
            name:'iphone 10',
            price:16888,
            count:113
        }]
    },
    computed:{
        totalPrice:function(){
            var total=0;
            for(var i =0;i                 var item = this.list[i];
                total+=item.price * item.count;
            }
            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
        }
    },
    methods:{
        handleReduce:function(index){
            if(this.list[index].count===1) return ;
            this.list[index].count--;
        },
        handleAdd:function(index){
            this.list[index].count++;
        },
        handleRemove:function(index){
            this.list.splice(index,1);
        }
    }
});