个性化阅读
专注于IT技术分析

如何使用v-for循环图片路径

在做项目的过程中,模版相同,可是不标题和图片不同,循环标题我们知道可以用v-for循环,可是图片路径怎么循环?

先上效果图:(图片是随便找的)

vue-for循环遍历图片

问题解决:

首先要在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" >{{title.text}}</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}
                ],
}
}
}

titles是一个数据,每个元素都是一个对象,我们访问的对象的属性的时候,使用元素的子项来访问。

赞(0) 打赏
未经允许不得转载:srcmini » 如何使用v-for循环图片路径
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏