Parcourez et chargez différentes images dans vue2.0 (tutoriel détaillé)

Ci-dessous, je vais partager avec vous une méthode pour parcourir et charger différentes images dans vue2.0. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

démo :

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

Présentez l'image, faites attention au chemin :

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

Emplacement de chargement des images :

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

De cette manière, différentes images peuvent être chargées lors du parcours en boucle.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Dans la barre de navigation inférieure de vue.js, comment afficher l'itinéraire de premier niveau et la solution au problème de non-affichage du sous-itinéraire ?

Comment implémenter le code de commutation aléatoire de l'identifiant WeChat via JavaScript (tutoriel détaillé)

Recharger la page de routage actuelle selon AngularJS, quelles sont les méthodes ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!