“

大家好，我是雄雄，歡迎關(guān)注微信公眾號(hào)：雄雄的小課堂。

”

前言

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

效果

image-20211107190700022

大致說明一下：右邊的器材安裝數(shù)量排行就是按照前言中所說，因?yàn)榍叭谋尘皥D片是深藍(lán)色的，往后的的都是淺藍(lán)色的，于是就想了這樣的辦法，先輸出前三條，然后在輸出后面的信息。

實(shí)現(xiàn)

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

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

去后臺(tái)中查詢器材數(shù)量的數(shù)據(jù)，放在equipmentCountByChangList集合中，代碼如下：

//場(chǎng)館器材統(tǒng)計(jì)信息getEquipementCountOrderByChang(){getEquipementCountOrderByChang().then(response?=>?{this.equipmentCountByChangList?=?response.data;});},

getEquipementCountOrderByChang方法為后臺(tái)查詢數(shù)據(jù)的方法。

重點(diǎn)來了，怎么使用v-for進(jìn)行限制遍歷呢？

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>

至此，效果就可以實(shí)現(xiàn)成如圖所示。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。