vue 獲取后台圖片路徑拼接域名，點擊切換圖片（放大鏡特效完善）

獲取后台路徑拼接

先來看看效果圖：

首先我們先看看從后台取到的數據:

首先我們再data中定義變量接收后台數據，把接口鏈接寫在api文件中，在data中引用：

代碼如下：

                  <div class="show" v-if="imgurls.length == 0">
                    <pic-zoom :url="imgurl" :scale="3"></pic-zoom>
                  </div>
                  <div v-else class="">
                    <pic-zoom
                      :url="url + fistImg"
                      :scale="3"
                      id="imgStyle"
                    ></pic-zoom>
                  </div>
                  <div class="smallshow">
                    <p class="prev prevnone"></p>
                    <div class="middle_box">
                      <ul class="middle">
                        <li
                          v-if="imgurls.length == 0"
                          style="border: 2px solid rgb(255, 68, 0);"
                        >
                          <img src="../../assets/img/home/zwtp.jpg" />
                        </li>
                        <li
                          v-else
                          v-for="(obj, index) in imgurls"
                          :key="index"
                          :class="{ active: currentSort == index }"
                          @click="active(index, obj)"
                        >
                          <img :src="url + obj.url" />
                        </li>
                      </ul>
                    </div>
                    <p class="next "></p>
                  </div>
                </div>

默認如果沒有數據的顯示本地圖片，data中定義數組imgurls接收所有的圖片數據，fistImg為大圖顯示數據，大圖默認顯示數組的第一張圖片，點擊切換時把小圖的路徑賦值給大圖。

切換圖片方法:

active(index, obj) {
      this.currentSort = index;
      this.fistImg = obj.thumbUrl;
      console.log(obj);
      console.log(this.url + obj.url);
    }

學習是一件堅持的事情，要加油哦！