vue.js默认收货地址选择代码
基于vue.js实现的默认收货地址选择代码，电商平台比较常用的一个地址选择功能。
注：本地预览需服务环境，如localhost。
部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge，chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>我的收货地址</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5.min.js"></script>
<![endif]-->
</head>
<body>
<!--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>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
//地址管理
const vueAddress = new Vue({
el: '#vue-address',
data(){
return{
addressList: [], //地址列表
}
},
created(){
this.getAddressJson();
},
methods:{
//获取地址列表数据
getAddressJson(){
let url = 'js/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));
}
}
});
</script>
</body>
</html>
需要登录才能下载
黑蜘蛛
