在vue2.0中循環遍歷並且載入不同圖片（詳細教學）

下面我就為大家分享一篇vue2.0 循環遍歷載入不同圖片的方法，具有很好的參考價值，希望對大家有幫助。

demo：

#

    <p v-for="item in temps" :key="item.id">
     <p class="contract-item">
       <img :src="item.imgUrl">
     </p>
    </p>

引入圖片，注意路徑：

import con1 from "@/assets/img/con01.png";
import con2 from "@/assets/img/con02.png";
import con3 from "@/assets/img/con03.png";

進行圖片的載入位置：

 temps: [
    {
     imgUrl: con1
    },
    {
     imgUrl: con2
    },
    {
     imgUrl: con3
    },
   ],

這樣就實現了循環遍歷的時候加載不同的圖片。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在vue.js中底部導覽欄，如何做到一級路由顯示 子路由不顯示的解決方法？

如何透過JavaScript實作微訊號隨機切換程式碼（詳細教學）

根據AngularJS重新載入目前路由頁面，有哪些方法？

以上是在vue2.0中循環遍歷並且載入不同圖片（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！