微客导航 » 文章资讯 » 基于vue.js仿淘宝收货地址并设置默认地址的案例分析

基于vue.js仿淘宝收货地址并设置默认地址的案例分析

2023-07-18 12:30:03 351

这个案例主要是渲染地址列表，然后设置默认地址，与淘宝的收货地址功能一样，具体自行查看自己的淘宝收货地址；

效果图：

html结构








收货人


所在地区


详细地址


邮编


电话/手机


操作


设置







{{v.name}}




{{v.address}}




{{v.detailAddress}}




{{v.zipCode}}




{{v.phone}}





修改
|
删除

默认地址设为默认

js功能

//地址管理
constvueAddress=newVue({
el:'#vue-address',
data(){
return{
addressList:[],//地址列表
}
},
created(){
this.getAddressJson();
},
methods:{
//获取地址列表数据
getAddressJson(){
leturl='json/addressTest.json';
axios.get(url)
.then(response=>{
this.addressList=response.data.list;
})
.catch(error=>{
console.log(error)
})
},

//设置默认地址
setDefault(i){
constaddressList=this.addressList;
addressList.forEach((item,index)=>{
item.isDefault=index==i;
});
addressList.splice(0,0,...addressList.splice(i,1));
}

}
});

如有发现问题，可留言哦~

具体案例，可访问本人github：https://github.com/xiexikang/vue-setDefaultAddress

总结

到此这篇关于基于vue.js仿淘宝收货地址并设置默认地址的案例分析的文章就介绍到这了,更多相关vuejs设置默认地址内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

基于vue.js仿淘宝收货地址并设置默认地址的案例分析

热门推荐

随机推荐