用v-for配合swiper渲染图片

<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 {
        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>