首页 > 代码库 > vue界面初始化查询列表的方法之购物车案例

vue界面初始化查询列表的方法之购物车案例

var vm = new Vue({

  el:"#app",

  data:{

    totalMoney:0,

    productList:[],

    checkAllFlag:false ,

    delFlag:false

    delOneProduct:[],

  },

  filters:{ //局部过滤器 ,调用方法{{number | formatMoney}}

    formatMoney:function(value){

      return "$" +value.toFixed(2) //留两位小数

    }

  },

  mounted:function(){

    this.$nextTick(function(){//加上这个是确保Vue已经实例化成功

      this.cartView();

    })

  },

  methonds:{

    cartView:function(){

      var _this = this; //因为在查询后的回调里不能保证this代表vue,所以这里要用变量接收一下方便回调里用

      this.$http.get("data/cartData.json",{"id":123}).then(function(res){//json可以换成请求后的接口,id为查询的所传的参数没有可以不写

        _this.productList = res.body.result.list;

      })

      this.$http.get("data/cartData.json",{"id":123}).then(res=>{//这里是es6的写法除了写法简单外,它还能将作用域变成同一个,所以就不用定义_this变量了

        this.productList = res.body.result.list;

      })

    },

    changeNum:function(item,way){//数量的加减item代表单条数据,way是加减的标识

     if(way>0){

       item.number++; 

     }else{

       item.numer--;

       if(item.number<1){

         item.numer = 1;

       } 

     }  

      calcTotalPrice()   

    },

    selectedProduct:function(item){//选择商品(单选),调用:class="{‘check‘:item.checked}" @click = ‘selectedProduct(item)‘

      if(typeof item.checked == ‘undefined‘){//判断item里是否存在checked属性,不存在就注册一个。

        Vue.set(item,"checked",true)//全局注册,默认值为true

        this.$set(item,‘checked‘,true) //局部注册

      }else{

        item.checked = !item.checked;

      }

      calcTotalPrice()

    },

    checkAll:function(flag){//全选全不选,全选调用:class="{‘check‘:checkAllFlag}" @click="checkAll(true)";取消调用 @click="checkAll(false)"

      this.checkAllFlag = flag;

      this.productList.forEach(item,index=>{

        if(typeof item.checked == ‘undefined‘){

          this.$set(item,"checed",this.checkAllFlag)

        }else{

          item.checked = this.checkAllFlag 

        }

      calcTotalPrice()

      })

    },calcTotalPrice:function(){ 计算总金额

      this.totalMoney = 0;

      this.productList.forEach(item,index=>{

        if(item.checked){

          this.totalMoney +=item.productPrice*item.productQuentity;

        }

      })

    },

    delProduct:function(item){//点击删除弹出是否删除的框

      this.delFlag = true;

      this.delOneProduct = item;

    },

    delProduct:function(){//点击是调用的方法

      var index = this.productList.indexOf(this.delOneProduct)

       this.productList.splice(index,1); //这里只是界面删除,如果真的想删除需要调后台额删除接口

       this.delFlag = false;

    }

  }

})

 

//全局过滤器,可以写在一个工具js里{{numer | money(‘元‘)}}

Vue.filter(‘money‘,function(value,type){ //type是调用的时候传递的参数,没有可以不写

  return "$" + value.toFixed(2) + type

})

vue界面初始化查询列表的方法之购物车案例