vue界面初始化查询列表的方法之购物车案例-------支付界面
Posted 吃草的虾米
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue界面初始化查询列表的方法之购物车案例-------支付界面相关的知识，希望对你有一定的参考价值。
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界面初始化查询列表的方法之购物车案例-------支付界面的主要内容，如果未能解决你的问题，请参考以下文章