這個案例主要是渲染地址列表，然后設置默認地址，與淘寶的收貨地址功能一樣，具體自行查看自己的淘寶收貨地址；
效果圖：
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設置默認地址內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_42211816/article/details/95449724
