基于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

总结

到此这篇关于基于vue.js仿淘宝收货地址并设置默认地址的案例分析的文章就介绍到这了,更多相关vuejs设置默认地址内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！