VUE:v-for獲取列表前n個數據、中間范圍數據、末尾n條數據的方法


說明:

  1.開發使用的UI是mintUI,

要求:

1.獲取6到13之間的數據:items.slice(6,13)

<mt-cell v-for="(item,index) in items.slice(6,13)" :title="item.title" :key='index'>
    <a :href="item.url" :title="item.title" class="list-url">
         <img :src="item.src" :alt="item.title" class="list-img"/>
    </a>
</mt-cell>

2.獲取小於0到6之間的數據:(兩種)

  a:items.slice(0,6)

<mt-cell v-for="(item,index) in items.slice(0,6)" :title="item.title" :key='index'>
       <a :href="item.url" :title="item.title" class="list-url">
           <img :src="item.src" :alt="item.title" class="list-img"/>
       </a>
</mt-cell>

  b:v-if="index < 6"

<mt-cell v-for="(item,index) in items" v-if="index < 6" :title="item.title" :key='index'>
       <a :href="item.url" :title="item.title" class="list-url">
           <img :src="item.src" :alt="item.title" class="list-img"/>
       </a>
</mt-cell>

3.獲取最后6條數據:items.slice(items.length-6,items.length)

<mt-cell v-for="(item,index) in items.slice(items.length-6,items.length)" :title="item.title" :key='index'>
       <a :href="item.url" :title="item.title" class="list-url">
           <img :src="item.src" :alt="item.title" class="list-img"/>
       </a>
</mt-cell>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM