基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析

更新時(shí)間：2020年08月20日 09:46:47 作者：依然范特西的XXK

這篇文章主要介紹了基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

這個(gè)案例主要是渲染地址列表，然后設(shè)置默認(rèn)地址，與淘寶的收貨地址功能一樣，具體自行查看自己的淘寶收貨地址；

效果圖：

在這里插入圖片描述

html結(jié)構(gòu)

<!--the-address-->
<div class="the-address">
  <div class="adr-tent" id="vue-address">
    <table class="adr-table">
      <thead class="table-thead">
        <tr>
          <th rowspan="1" class="thh">
            <span class="tn">收貨人</span>
          </th>
          <th rowspan="1" class="thh">
            <span class="tn">所在地區(qū)</span>
          </th>
          <th rowspan="1" class="thh">
            <span class="tn">詳細(xì)地址</span>
          </th>
          <th rowspan="1" class="thh">
            <span class="tn">郵編</span>
          </th>
          <th rowspan="1" class="thh">
            <span class="tn">電話/手機(jī)</span>
          </th>
          <th rowspan="1" class="thh">
            <span class="tn">操作</span>
          </th>
          <th rowspan="1" class="thh">
            <span class="tn">設(shè)置</span>
          </th>
        </tr>
      </thead>
      <tbody class="table-tbody">
        <tr class="item" v-for="(v,i) in addressList">
          <td class="tdd">
            <span class="ti">
              <em class="tt">{{v.name}}</em>
            </span>
          </td>
          <td class="tdd">
            <span class="ti">
              <em class="tt">{{v.address}}</em>
            </span>
          </td>
          <td class="tdd">
            <span class="ti">
              <em class="tt">{{v.detailAddress}}</em>
            </span>
          </td>
          <td class="tdd">
            <span class="ti">
              <em class="tt">{{v.zipCode}}</em>
            </span>
          </td>
          <td class="tdd">
            <span class="ti">
              <em class="tt">{{v.phone}}</em>
            </span>
          </td>
          <td class="tdd">
            <span class="ti">
               <div class="handle">
                <a href="javascript:;" class="a-chg">修改</a>
                <i class="line">|</i>
                <em class="i-del">刪除</em>
              </div>
            </span>
          </td>
          <td class="tdd">
            <span class="ti">
               <em class="set-def cur" v-if="v.isDefault">默認(rèn)地址</em>
               <em class="set-def" v-else @click="setDefault(i)">設(shè)為默認(rèn)</em>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

js功能

 //地址管理
  const vueAddress = new Vue({
    el: '#vue-address',
    data(){
      return{
        addressList: [], //地址列表
      }
    },
    created(){
      this.getAddressJson();
    },
    methods:{
      //獲取地址列表數(shù)據(jù)
      getAddressJson(){
        let url = 'json/addressTest.json';
        axios.get(url)
          .then(response =>{
            this.addressList = response.data.list;
          })
          .catch(error => {
            console.log(error)
          })
      },

      //設(shè)置默認(rèn)地址
      setDefault(i){
        const addressList = this.addressList;
        addressList.forEach((item, index) => {
          item.isDefault = index == i;
        });
        addressList.splice(0, 0, ...addressList.splice(i, 1));
      }

    }
  });

如有發(fā)現(xiàn)問(wèn)題，可留言哦~

具體案例，可訪問(wèn)本人github：https://github.com/xiexikang/vue-setDefaultAddress

總結(jié)

到此這篇關(guān)于基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析的文章就介紹到這了,更多相關(guān)vuejs設(shè)置默認(rèn)地址內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: