vue实战记录（六）- vue实现购物车功能之地址列表选配

vue实战记录（六）- vue实现购物车功能之地址列表选配

vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据

作者：狐狸家的鱼

本文链接：vue实战-实现购物车功能（六）

GitHub：sueRimn

 

主要实现地址页面的适配和设置地址默认与删除，以及更多显示的状态取反。

address.html

        <!-- address list -->
        <div class="checkout-title">
          <span>配送地址</span>
        </div>
        <div class="addr-list-wrap">
          <div class="addr-list">
            <ul>
              <li v-for="(item, index) in filterAddress" :key="index" :class="{'check':index==currentIndex}" @click="currentIndex=index">
                <dl>
                  <dt v-cloak>{
  {item.userName}}</dt>
                  <dd class="address" v-cloak>{
  {item.streetName}}</dd>
                  <dd class="tel" v-cloak>{
  {item.tel}}</dd>
                </dl>
                <div class="addr-opration addr-edit">
                  <a href="javascript:;" class="addr-edit-btn" @click="editAddress(item.addressId)">
                    <svg class="icon icon-edit"><use xlink:href="#icon-edit"></use></svg>
                  </a>
                </div>
                <div class="addr-opration addr-del">
                  <a href="javascript:;" class="addr-del-btn" @click="delConfirm(item)">
                    <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
                  </a>
                </div>
                <div class="addr-opration addr-set-default">
                  <a href="jav