素材牛VIP会员
vue中使用swiper插件和vfor配合循环的问题
 85***32  分类:Html5  人气:2467  回帖:4  发布于6年前 收藏

在一个页面中需要一个用swiper的轮播图,数据大概有40条,每一屏幕的swiper只显示其中的6条数据。
使用了vue的v-for来做但是在循环上遇到了难题

 let app = new Vue({
        el: '#app',
        data:{
            lime:["a","b","c","d","e","f","g"] //表示数据
        }
       })

html上的代码为

<div id="app">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in lime">
            
            </div>
        </div>
    </div>
</div>

想要实现的是
根据lime的数量来循环swiper-slide,每3个循环出一个,然后里面只放3个,

<div id="app">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            a b c
            </div>
            <div class="swiper-slide">
            d e f
            </div>
            <div class="swiper-slide">
            g
            </div>
        </div>
    </div>
</div>

实在没有头绪了,是重新处理数据,还是有更加好的v-for写法

 标签:swipervue.jshtml5

讨论这个帖子(4)垃圾回帖将一律封号处理……

Lv6 码匠
on***de JAVA开发工程师 6年前#1

使用双层for 首先将每3个元素放到一个数组里,再把小数组放到一个大数组

Lv3 码奴
43***48 职业无 6年前#2

楼上正解.

Lv3 码奴
43***48 职业无 6年前#3

看看,

Lv3 码奴
10***29 职业无 6年前#4
看不懂,过来签个名
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取