How to implement loop traversal in vue2.0

This time I will bring you the loop of vue2.0How to implement the traversal, what are the notesfor implementing the loop traversal of vue2.0, the following is a practical case, let’s take a look one time.

demo：

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

Introduce picture, pay attention to the path:

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

Loading location of images:

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

This enables loading different images during loop traversal.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The use of v-for index index in html

Sometimes the css reference image is found after packaging What is the reason why the resource file cannot be found?

The above is the detailed content of How to implement loop traversal in vue2.0. For more information, please follow other related articles on the PHP Chinese website!