vue2.x 循环img src遍历加载不同图片的方法

你的名字 2024-04-17 23:03 41阅读 0赞

# vue2.x 循环img src遍历加载不同图片的方法 #

## 第一种，vue.js直接引入网页的模式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]

### html ###

<main class="tabThird">
            <section class="showFelx">
              <div v-for="(item,index) in items" :key="index" class="itemsShow">
                <img :src="item.img" alt="" />
                <span>{
       { item.title }}</span>
                <span :class="item.classColor" class="colorShow"></span>
              </div>
            </section>
          </main>

### js ###

data() { 
              return { 
                // todo: this.tableData.length,
                items: [
                  {  img: "./images/line.png", title: "在线状态", classColor: "isA" },
                  {  img: "./images/work.png", title: "工作状态", classColor: "isB" },
                  {  img: "./images/lock.png", title: "锁机状态", classColor: "isC" }
                ],
                	}
               }

## 第二种方法，脚手架的使用 ##

#### temp ####

#### 引入图片，注意路径 ####

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
    	    },
       ],

总结： 这样就实现了循环遍历的时候加载不同的图片。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/2ac5a070df76499aac85e322b136d50f.png