vue使用v-for循环图片路径的方法

 

在vue中,如何使用v-for循环图片?

先上效果图:

img

问题解决:

首先要在js中引入需要的循环的图片


import img1 from "@/static/img-01.jpg"

import img2 from "@/static/img-02.jpg"

import img3 from "@/static/img-03.jpg"

import img4 from "@/static/img-04.jpg"

然后在需要循环的部分用v-for循环

如下:


<view class="main">

<view class="main-item" v-for="title in titles">

<view>

<view class="title" ></view>

</view>

<view>

<image class="main-img" :src="title.img" mode=""></image>

</view>

</view>

</view>

注意图片部分的路径,src前面有【:】此处是使用了vue绑定了src属性进行数据传递。

最后是循环的数据:

export default {

    data() {

      return {

        titles:[

          {text:'限时抢购',img:img1},

          {text:'天猫好物',img:img2},

          {text:'聚划算',img:img3},

          {text:'天猫闪购',img:img4}

        ],

}

}

}

vue中,传递图片数据使用src属性进行数据传递。

本文为博主原创文章,知识共享,开源精神,转载注明出处。