vue购物车逻辑

购物车简易demo

1. 在data()中添加商品

   return {
           msg: "这是一个变量",
           //购物车变量
           clist: [
             {name: 'iphone 8', price: 5099,num:1},
             {name: 'iphone x', price: 8699,num:1},
             {name: 'iphone xs', price: 6499,num:1}
             ],
           //总价格
           price:0,
         }
   

2. template中完成表格

   			<tr v-for="(i,index) in this.clist">
                   <td data-th="Product">
                     <div class="row">
                       <div class="col-md-3 text-left">
                         <img src="../assets/images/placeholder-product.jpg"  class="img-fluid">
                       </div>
                       <div class="col-md-9 text-left mt-sm-2">
                         <h4>{{i.name}}</h4>
                       </div>
                     </div>
                   </td>
                   <td data-th="Price">{{i.price}}</td>
                   <td data-th="Quantity">
                     <input type="number" class="form-control text-center" v-model="i.num">
                   </td>
                   <td class="actions" data-th="">
                     <div class="text-right">
                       <Button @click="changenum(index,'+')"><i class="fas fa-sync">+</i></Button>
                       <Button @click="changenum(index,'-')"><i class="fas fa-trash">-</i></Button>
                     </div>
                   </td>
                   <td><Button @click="rem(index)">移除</Button></td>
                 </tr>
   

3. 在mounted钩子方法中写入页面加载立即计算总价

    mounted: function () {
         //加载页面第一次计算总价
         for(let i =0,l=this.clist.length;i<l;i++){
               this.price+=(this.clist[i].price*this.clist[i].num)
           }
       },
   

4. 在 methods中定义方法.

       methods: {
         //删除某个商品
         rem(index){
           this.clist.splice(index,1);
           this.price=0;
           //删除之后再次计算总价
           for(let i =0,l=this.clist.length;i<l;i++){
               this.price+=(this.clist[i].price*this.clist[i].num)
           }
         },
         //计算累加或累减
         changenum(index,type){
           if (type==='+'){
             this.clist[index].num++;
             //做完运算之后,在总价上累加
               this.price+=this.clist[index].price
           } else {
             if (this.clist[index].num>1){
               this.clist[index].num--;
               this.price-=this.clist[index].price
             }
           }
         }
       }
   

5. 最终效果实现