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





















































收货人



所在地区



详细地址



邮编



电话/手机



操作



设置





{{v.name}}







{{v.address}}







{{v.detailAddress}}







{{v.zipCode}}







{{v.phone}}









修改

|

删除









默认地址

设为默认




























































收货人



所在地区



详细地址



邮编



电话/手机



操作



设置





{{v.name}}







{{v.address}}







{{v.detailAddress}}







{{v.zipCode}}







{{v.phone}}









修改

|

删除









默认地址

设为默认






js功能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));

}


}

});
//地址管理

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具体案例，可访问本人github总结总结总结