欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2.0 循環(huán)遍歷加載不同圖片的方法

 更新時(shí)間：2018年03月06日 09:09:42   作者：yyjourney  
下面小編就為大家分享一篇vue2.0 循環(huán)遍歷加載不同圖片的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

demo：

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

引入圖片，注意路徑：

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

進(jìn)行圖片的加載位置：

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

這樣就實(shí)現(xiàn)了循環(huán)遍歷的時(shí)候加載不同的圖片。

以上這篇vue2.0 循環(huán)遍歷加載不同圖片的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vuex的使用和簡(jiǎn)易實(shí)現(xiàn)

    vuex的使用和簡(jiǎn)易實(shí)現(xiàn)

    這篇文章主要介紹了vuex的使用和簡(jiǎn)易實(shí)現(xiàn)，幫助大家更好的理解和使用vuex，感興趣的朋友可以了解下
    2021-01-01
  • Vue源碼學(xué)習(xí)defineProperty響應(yīng)式數(shù)據(jù)原理實(shí)現(xiàn)

    Vue源碼學(xué)習(xí)defineProperty響應(yīng)式數(shù)據(jù)原理實(shí)現(xiàn)

    這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)defineProperty響應(yīng)式數(shù)據(jù)原理實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-09-09
  • Vue2?特殊符號(hào)讓人傻傻分不清?“:”、“.”、“@”、“#”?、“{{}}“?、“$“,‘$bus‘,‘$event‘

    Vue2?特殊符號(hào)讓人傻傻分不清?“:”、“.”、“@”、“#”?、“{{}}“?、“$“,‘$bus‘,‘$e

    :”是指令?“v-bind”的縮寫(xiě)“.”是修飾符?“@”是指令“v-on”的縮寫(xiě)?,它用于監(jiān)聽(tīng)?DOM?事件?“#”是v-slot的縮寫(xiě),這篇文章主要介紹了Vue2?新手上路無(wú)處不在的特殊符號(hào)讓人傻傻分不清“:”、“.”、“@”、“#”?、“{{}}“?、“$“,$bus,$event,需要的朋友可以參考下
    2024-08-08
  • Vue中Axios從遠(yuǎn)程/后臺(tái)讀取數(shù)據(jù)

    Vue中Axios從遠(yuǎn)程/后臺(tái)讀取數(shù)據(jù)

    今天小編就為大家分享一篇關(guān)于Vue中Axios從遠(yuǎn)程/后臺(tái)讀取數(shù)據(jù)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
    2019-01-01
  • vue實(shí)現(xiàn)新聞?wù)故卷?yè)的步驟詳解

    vue實(shí)現(xiàn)新聞?wù)故卷?yè)的步驟詳解

    最近小編遇到這樣的需求，要實(shí)現(xiàn)一個(gè)新聞?wù)故卷?yè)功能，剛接到這樣的需求還真是一頭霧水，不知從哪入手，今天小編通過(guò)實(shí)例代碼給大家介紹下vue實(shí)現(xiàn)新聞?wù)故卷?yè)的步驟詳解，感興趣的朋友跟隨小編一起看看吧
    2019-04-04
  • Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置

    Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置

    這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-06-06
  • Vue.js項(xiàng)目模板搭建圖文教程

    Vue.js項(xiàng)目模板搭建圖文教程

    下面小編就為大家?guī)?lái)一篇Vue.js項(xiàng)目模板搭建圖文教程。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • Vue3全局配置axios的兩種方式總結(jié)

    Vue3全局配置axios的兩種方式總結(jié)

    在實(shí)際項(xiàng)目開(kāi)發(fā)中,幾乎每個(gè)組件中都會(huì)用到?axios?發(fā)起數(shù)據(jù)請(qǐng)求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • vue 實(shí)現(xiàn)Web端的定位功能 獲取經(jīng)緯度

    vue 實(shí)現(xiàn)Web端的定位功能 獲取經(jīng)緯度

    這篇文章主要介紹了vue 實(shí)現(xiàn)Web端的定位功能獲取經(jīng)緯度，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • vue項(xiàng)目中頁(yè)面跳轉(zhuǎn)傳參的方法總結(jié)

    vue項(xiàng)目中頁(yè)面跳轉(zhuǎn)傳參的方法總結(jié)

    在Vue項(xiàng)目中,你可以使用路由（vue-router）來(lái)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)并傳遞參數(shù),這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學(xué)習(xí)一下
    2023-11-11

最新評(píng)論