基于vue.js仿淘宝收货地址并设置默认地址的案例分析

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

效果图:

基于vue.js仿淘宝收货地址并设置默认地址的案例分析_第1张图片

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设置默认地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(基于vue.js仿淘宝收货地址并设置默认地址的案例分析)