index.js

实战篇：利用计算属性、指令等知识开发购物车源代码

var app = new Vue({

    el:'#app',

    data:{

      list:[

          {id:1,name:'iPhone7',price:6188,count:1},

          {id:2,name:'iPad Pro',price:58888,count:1},

          {id:2,name:'MacBook Pro',price:2148,count:1},

    ]

  },

computed:{

    totalPrice:function(){

       var total = 0;

       for(var i=0;i

       total+=list[i].price * list[i]*count;

   }

        return total.toString.replace(\/B(?=(\d{3})+$)/g,',');

 }

},

    methods:{

       hanldReduce:function(index){

         if(this.list[index].count===1){

          return;

        }else{

          return  this.list[index].count--;

}

},

  handleAdd:function(index){

       return this.list[index].count++;

 },

 handelRemove:function(index){

        this.list[index].splice(index,1);

   }

  }

});