鸭脖app官网:基于vue.js的案例分析模拟了淘宝接收地址并设置了默认地址

2021-04-01 18:27:20 浏览: 104次 来源:【jake】 作者:-=Jake=-

基于vue.js的案例分析模拟了淘宝接收地址并设置了默认地址

更新时间:2020年8月20日09:46:47作者:XXK的静物画

本文主要介绍基于vue.js仿淘宝接收地址并设置默认地址的案例分析。本文通过示例代码向您详细介绍js仿淘宝收货地址插件华体会 ,该示例代码对每个人的学习或工作都具有一定的参考价值。有需要的朋友可以参考

这种情况主要是渲染地址列表凤凰体育 ,然后设置默认地址,该地址与淘宝的收货地址功能相同js仿淘宝收货地址插件亚博app安全有保障 ,专门检查您的淘宝收货地址;

效果图:

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:

摘要

本文介绍了基于vue.js的案例分析,该案例模仿了淘宝的收货地址并设置了默认地址。有关更多有关设置默认地址内容的vuejs的信息,请搜索Script Home的上一篇文章华体会官网 ,或继续浏览下面的相关文章,希望您将来会更多支持Scripthome!

老王