基于vue.js仿淘宝收货地址并设置默认地址的案例
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了基于vue.js仿淘宝收货地址并设置默认地址的案例分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
这个案例主要是渲染地址列表，然后设置默认地址，与淘宝的收货地址功能一样，具体自行查看自己的淘宝收货地址；
效果图：
html结构
<!--the-address-->
<div class="the-address">
<div class="adr-tent" id="vue-address">
<table class="adr-table">
<thead class="table-thead">
<tr>
<th rowspan="1" class="thh">
<span class="tn">收货人</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">所在地区</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">详细地址</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">邮编</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">电话/手机</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">操作</span>
</th>
<th rowspan="1" class="thh">
<span class="tn">设置</span>
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="item" v-for="(v,i) in addressList">
<td class="tdd">
<span class="ti">
<em class="tt">{{v.name}}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="tt">{{v.address}}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="tt">{{v.detailAddress}}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="tt">{{v.zipCode}}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="tt">{{v.phone}}</em>
</span>
</td>
<td class="tdd">
<span class="ti">
<div class="handle">
<a href="javascript:;" class="a-chg">修改</a>
<i class="line">|</i>
<em class="i-del">删除</em>
</div>
</span>
</td>
<td class="tdd">
<span class="ti">
<em class="set-def cur" v-if="v.isDefault">默认地址</em>
<em class="set-def" v-else @click="setDefault(i)">设为默认</em>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
js功能
//地址管理
const vueAddress = new Vue({
el: '#vue-address',
data(){
return{
addressList: [], //地址列表
}
},
created(){
this.getAddressJson();
},
methods:{
//获取地址列表数据
getAddressJson(){
let url = 'json/addressTest.json';
axios.get(url)
.then(response =>{
this.addressList = response.data.list;
})
.catch(error => {
console.log(error)
})
},
//设置默认地址
setDefault(i){
const addressList = 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设置默认地址内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！