“

大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂。

”

前言

今天整理個簡單的功能，vue中的v-for如何限制遍歷輸出的數據，比如我想在一個存放10條數據的集合中只輸出3條怎么寫？只想從第四條開始輸出到第10條結束再怎么寫？

效果

image-20211107190700022

大致說明一下：右邊的器材安裝數量排行就是按照前言中所說，因為前三名的背景圖片是深藍色的，往后的的都是淺藍色的，于是就想了這樣的辦法，先輸出前三條，然后在輸出后面的信息。

實現

首先在data中的return中聲明存放數據集合的變量：equipmentCountByChangList,代碼如下：

export?default?{name:?"home",data()?{return?{//器材安裝廠商數量信息equipmentCountByChangList:[],}; }

去后臺中查詢器材數量的數據，放在equipmentCountByChangList集合中，代碼如下：

//場館器材統計信息getEquipementCountOrderByChang(){getEquipementCountOrderByChang().then(response?=>?{this.equipmentCountByChangList?=?response.data;});},

getEquipementCountOrderByChang方法為后臺查詢數據的方法。

重點來了，怎么使用v-for進行限制遍歷呢？

1-3：

<div class="qicai_orderby_item" v-for="(item,index) in equipmentCountByChangList.slice(0,3)"><span>{{ index+1 }}</span>{{item.names}}<b style="display: inline-block;float: right;margin-right: 20px;">{{item.counts}}</b></div>

4-后面所有：

<div class="qicai_orderby_item from4" v-for="(item,index) in equipmentCountByChangList.slice(3)"><span>{{ index+4 }}</span>{{item.names}}<b style="display: inline-block;float: right;margin-right: 20px;">{{ item.counts }}</b></div>

至此，效果就可以實現成如圖所示。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue中如何使用vi-for限制遍历的条数？只查询前三条、查询4-6条怎么实现？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。