在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ vue中使用swiper插件和vfor配合循環(huán)的問題

vue中使用swiper插件和vfor配合循環(huán)的問題

在一個頁面中需要一個用swiper的輪播圖,數(shù)據(jù)大概有40條,每一屏幕的swiper只顯示其中的6條數(shù)據(jù)。
使用了vue的v-for來做但是在循環(huán)上遇到了難題

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

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>

想要實現(xiàn)的是
根據(jù)lime的數(shù)量來循環(huán)swiper-slide,每3個循環(huán)出一個,然后里面只放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>

實在沒有頭緒了,是重新處理數(shù)據(jù),還是有更加好的v-for寫法

回答
編輯回答
久不遇

使用雙層for 首先將每3個元素放到一個數(shù)組里,再把小數(shù)組放到一個大數(shù)組

2018年6月24日 21:26