Durchlaufen und Laden verschiedener Bilder in vue2.0 (ausführliches Tutorial)

Im Folgenden werde ich Ihnen eine Methode zum Durchlaufen und Laden verschiedener Bilder in vue2.0 vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Demo:

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

Stellen Sie das Bild vor und achten Sie darauf Pfad:

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

Ladeort der Bilder:

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

Auf diese Weise können beim Schleifendurchlauf unterschiedliche Bilder geladen werden.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

In der unteren Navigationsleiste in vue.js erfahren Sie, wie Sie die Route der ersten Ebene anzeigen und die Lösung für das Problem, dass die Unterroute nicht angezeigt wird ?

So implementieren Sie zufälligen Umschaltcode der WeChat-ID über JavaScript (ausführliche Anleitung)

Laden Sie die aktuelle Routing-Seite neu Welche Methoden gibt es laut AngularJS?

Das obige ist der detaillierte Inhalt vonDurchlaufen und Laden verschiedener Bilder in vue2.0 (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!