在一个页面中需要一个用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写法
使用双层for 首先将每3个元素放到一个数组里,再把小数组放到一个大数组