Vue解决购物车

Vue 易用，灵活，高效。

    {{ message }}

这就是一个最简单的Vue。

灵活-渐进式。

Vue 的基础指令介绍：

指令使用 v-model v-text v-show v-if v-bind v-for v-on

v-model 的主要应用场景是 表单输入双向绑定。

v-text                                   文本渲染 等同于 {{ }} ,

v-show                                 dom的显示和隐藏

v-if                                        判断

v-bind                                   给dom元素绑定属性。

v-for                                      循环

v-on                                     事件绑定

过滤器Filter

组件 Component          

类似django，beego 的template的复用

 

下面是购物车代码

index.html

    
    
    
    
    
    
    
    
    


    

      


        

        

          

            

              {{title}}
            

            
            

              

                

                  

                    
商品信息
                    
商品金额
                    
商品数量
                    
总金额
                    
编辑
                  
                
                

                  

                    

                      

                        
                          
                        
                      
                      

                        
                      
                      

                        
{{item.productName}}
                      
                      

                        

                          
赠送:
                          

                        
                      
                    
                    

                      
{{item.productPrice | formatMoney('元')}}
                    
                    

                      

                        

                          

                            -
                            
                            +
                          
                        
                        
有货
                      
                    
                    

                      
{{item.productPrice*item.productQuantity | formatMoney('元') }}
                    
                    

                      

                        
                          
                        
                      
                    
                  
                
              
            

            
            

              

                

                  
                     
                      
                    
                    全选
                  
                
                

                  
                    取消全选
                  
                
              
              

                

                  Item total: {{totalMoney | formatMoney('元')}}
                
                

                  结账
                
              
            
          
        

        

          

            

              关闭
            
            

              

                
你确认删除此订单信息吗?
              
              

                Yes
                No
              
            
          
        
        

      
    

    
    
    

cert.js

var app=new Vue({
   el:"#app",
   data:{
       title:'购物车',
       productionList:[],
       totalMoney:0,
       checkAllFlag:false,
       delFlag:false,
       curProduct:''
   },
   filters:{
       formatMoney: function (value,type) {
           return "￥" +value.toFixed(2)+type;
       }
   },
   mounted:function () {
       this.$nextTick(function () {
           this.productListView();
       })
   },
   methods:{
       productListView: function () {
           let _this = this;
           // this.$http.get("data/cartData.json",{}).then(function (res) {//{id:"1"} 是请求的参数，不需要可以不用写
           //      _this.productionList = res.data.result.list;
           // });
           this.$http.get("data/cartData.json",{}).then(res=>{   //es6的箭头函数
               this.productionList = res.data.result.list;
           })
        },
       changeMoney: function (product,way) {
           if(way>0){
               product.productQuantity++;
           }else{
               if(product.productQuantity > 1){
                   product.productQuantity--;
               }
           }
           this.calcTotalPrice();
       },
       selectProduct: function (item) {
           if(typeof item.checked == 'undefined'){   //造一个字段
               Vue.set(item,"checked",true);         //全局注册一个字段
               //this.$set()                           //局部注册
           }else{
               item.checked = !item.checked;
           }
           this.calcTotalPrice();
       },
       checkAll: function (flag) {
           this.checkAllFlag = flag;
           var _this = this;
           this.productionList.forEach(function (item,index) {
               if(typeof item.checked == 'undefined'){   //造一个字段
                   _this.$set(item,"checked",_this.checkAllFlag);
               }else{
                   item.checked = _this.checkAllFlag;
               }
           });
           this.calcTotalPrice()
       },
       calcTotalPrice: function () {
           var _this = this;
           this.totalMoney = 0;
           this.productionList.forEach(function (item,index) {
               if(item.checked){   //造一个字段
                   _this.totalMoney += item.productPrice*item.productQuantity
               }
           })
       },
       delConfirm:function (item) {
           this.delFlag = true;
           this.curProduct = item;
       },
       delProduct:function () {
           var index = this.productionList.indexOf(this.curProduct);
           this.productionList.splice(index,1);
           this.delFlag = false;
       }
   }
});

Vue.filter("money",function (value,type) {
   return "￥" +value.toFixed(2)+type;
});

参考 https://github.com/jgchenu/vue-shopcar

原作者的代码下下来好像有些不可用，下面是我的

https://github.com/weijiaxiang007/vue-shopcart