Vue实现购物车结算功能

效果显示：

功能代码：

　　index.js:

var app = new Vue({
   el:'#app',
   data:{
      list:[
         {
            id:1,
            name:'redmi k20',
            price:2000,
            count:1
         },
         {
            id:2,
            name:'meizu 16xs',
            price:1499,
            count:1
         },
         {
            id:3,
            name:'realme X',
            price:1499,
            count:1
         }
      ]

   },
   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);
      }
   }
});

index.html:

    
    
购物车为空


!：
 1.computed：计算属性
 2.JavaScript splice方法

转载于:https://www.cnblogs.com/yhliu/p/11237739.html