用v-for配合swiper渲染图片

最新推荐文章于 2025-04-04 14:35:35 发布

DaftJayee

最新推荐文章于 2025-04-04 14:35:35 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_43540219/article/details/107616095

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用v-for指令结合swiper组件，动态渲染一组图片。通过创建数据列表，利用v-for遍历并渲染图片，同时配置swiper选项实现滑动效果，达到灵活展示多张图片的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="tabs">
        <swiper :options="swiperOption">
            <!-- slides -->
              <!--注意这里必须要有:key否则，报错-->
			<!--原因：https://blog.youkuaiyun.com/qq_43540219/article/details/107615142-->
            <swiper-slide v-for="item in tabsList" :key="item.id">
                <div >
                   <!--注意这里src要改成:src-->
                    <img :src='item.imgUrl' >  
                    <p>{{item.title}}</p>
                </div>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<style scoped>
    .tabs {
        padding: .3rem 0;
    }
</style>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                //更多的选项去swiper官网看，这里不是重点
                    slidesPerView: 4.5//显示4.5个
                },
                tabsList: [
                    {
                        id: 0,
                        imgUrl: "/img/tabs1.gif",
                        title: "签证"
                    },
                    {
                        id: 1,
                        imgUrl: "/img/tabs2.png",
                        title: "游侠集市"
                    },
                    {
                        id: 2,
                        imgUrl: "/img/tabs3.png",
                        title: "分享会"
                    },
                    {
                        id: 3,
                        imgUrl: "/img/tabs4.gif",
                        title: "别young之旅"
                    },
                    {
                        id: 4,
                        imgUrl: "/img/tabs5.gif",
                        title: "瑜伽行"
                    },
                    {
                        id: 5,
                        imgUrl: "/img/tabs6.png",
                        title: "旅拍"
                    },
                    {
                        id: 6,
                        imgUrl: "/img/tabs7.png",
                        title: "视频"
                    },
                    {
                        id: 7,
                        imgUrl: "/img/tabs8.png",
                        title: "游记"
                    },
                    {
                        id: 8,
                        imgUrl: "/img/tabs9.png",
                        title: "目的地"
                    },
                    {
                        id: 9,
                        imgUrl: "/img/tabs10.png",
                        title: "圈子"
                    }
                ],
            }
        }
    }
</script>