用v-for配合swiper渲染图片

最新推荐文章于 2024-08-07 15:01:52 发布

DaftJayee

最新推荐文章于 2024-08-07 15:01:52 发布

阅读量944

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_43540219/article/details/107616095

版权

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

摘要由CSDN通过智能技术生成

<template>
    <div class="tabs">
        <swiper :options="swiperOption">
            <!-- slides -->
              <!--注意这里必须要有:key否则，报错-->
			<!--原因：https://blog.csdn.net/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 {
        da