基于vue.js仿淘宝收货地址，并设置默认地址

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

效果图：

html结构

    

        

            

                

                    

                        收货人
                    
                    

                        所在地区
                    
                    

                        详细地址
                    
                    

                        邮编
                    
                    

                        电话/手机
                    
                    

                        操作
                    
                    

                        设置
                    
                
            
            

                

                    

                        
                            {{v.name}}
                        
                    
                    

                        
                            {{v.address}}
                        
                    
                    

                        
                            {{v.detailAddress}}
                        
                    
                    

                        
                            {{v.zipCode}}
                        
                    
                    

                        
                            {{v.phone}}
                        
                    
                    

                        
                             

                                修改
                                |
                                删除
                            
                        
                    
                    

                        
                             默认地址
                             设为默认
                        
                    
                
            
        
    

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