vue实现购物车和地址选配（二）

• 参考文献： vue官网： vue.js
• 效果展示：全选和取消全选，计算总金额

 

 

• 项目源代码：https://github.com/4561231/hello_world
• 项目核心代码实现及踩坑

1. 1.全选和取消全选

              vue实例代码如下

new Vue({
    el:'#app',
    data:{
      productlist:[]
    },
    //必须加mounted函数，这是页面初加载，如果不写这个函数，network中将请求不到数据
    mounted:function(){
          this.cartView();
    },

    //局部过滤器
    filters:{

        formatMoney:function(value){
            return "$" + value.toFixed(2);
        }
    },
    
    methods:{

        cartView:function(){
            
        var _this=this;    //要保存这个this,
        this.$http.get('data/cartData.json',{'id':'123'}).then(function(res){
                  
          _this.productlist=res.data.result.list;   //这里的this已经不是实例对象了
        });

        },

        changeMoney:function(product,way){
         
         if(way>=1){
          product.productQuantity++;
         }else{
               product.productQuantity--;
             if(product.productQuantity<1){
                 product.productQuantity=1;
             }
         }

        },

        selectedProduct:function(item){

            //每次选中的时候先判断当前这个item.checked属性是否存在
            if(typeof item.check=="undefined"){
                this.$set(item,'check',true);//如果不存在就先给他设置一个
            }else{
                item.check=!item.check;
            }
        }
    }

});

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

vue实例.js