Vue实现简单购物车效果

效果：总计会随着总价的变化而变化，总价随着数量的变化而变化

QQ截图20180914094046.png

body部分：

   

       

           

               
编号
               
名称
               
单价
               
数量
               
总价
           
       
       

           

               
{{value.num}}
               
{{value.uname}}
               
{{value.price}}
               

                   +
                       {{value.quantity}}
                   -
               
               
{{value.total}}
           
           

               
总计:{{arrs}}元
           
       
   

js部分：

new Vue({
        el:'#app',
        data:{
            arr:[
                {num:1,uname:'香蕉',price:1,quantity:1,total:1},
                {num:2,uname:'苹果',price:2,quantity:1,total:2},
                {num:3,uname:'橘子',price:3,quantity:1,total:3}
            ],
            arrs:6
        },
        methods:{
            jia:function(ind){
                this.arr[ind].quantity++
                this.arr[ind].total=(this.arr[ind].price)*this.arr[ind].quantity
                this.getTotal()
            },
            jian:function(index){
                if(this.arr[index].quantity>1){
                    this.arr[index].quantity--
                    this.arr[index].total=this.arr[index].price*this.arr[index].quantity
                }
                this.getTotal()
            },
            getTotal:function(){
                for(var i=0,to=0;i

style部分：