码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-04-03 19:30:30      阅读:508      评论:0      收藏:0      [点我收藏+]

标签:containe   ppi   实时计算   购物车   ssid   blog   ice   --   current   

new Vue({

  el:".container",

  data:{

    addressList:[],

    limitNum:3,

    currentIndex:0, //用于选择地址,调用:class="{‘check‘:index==currentIndex}" @click="currentIndex=index"

    shippingMethod:1,//使用见文档底部图片

  },

  mounted:function(){

    this.$nextTick(function(){

      getAddressList()

    })

  },

  computed:{//computed一般用于实时计算

    filterAddress:function(){ for循环中的过滤器,初始化时只显示三个地址。调用 v-for = "(item ,index) in filterAddress"

      return this.addressList.slice(0,this.limitNum); 截取前3个

    }

  },

  methods:{

    getAddressList:function(){

      this.$http.get("data/address.json").then(response=>{

        var res =response.data;

        if(res.status == "0"){

          this.addressList = res.result

        }

      })

    },

    loadMord:function(){ //显示全部地址

      this.limitNum = this.addressList.length

    },

    setDefault:function(addressId){

      this.addressList.forEach((address,index)=>{

        if(address.addressId==addressId){

          address.isDefault = true;

        }else{

          address.isDefault = false;

        }

      })

    }

  }  

 

})

技术分享

 

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

标签:containe   ppi   实时计算   购物车   ssid   blog   ice   --   current   

原文地址:http://www.cnblogs.com/cxdxm/p/6662981.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!