基于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));
            }

        }
    });

源码会持续更新到公众号，需要可以关注一下哦…