vue中如何使用vi-for限制遍历的条数?只查询前三条、查询4-6条怎么实现?
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。”前言今天整理个简单的功能,vue中的v-for如何限制遍历输出的数据,比如我想在一个存放10条数据的集合中只输出3条怎么写?只想从第...
·
“大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。
”
前言
今天整理个简单的功能,vue
中的v-for
如何限制遍历输出的数据,比如我想在一个存放10条数据的集合中只输出3条怎么写?只想从第四条开始输出到第10条结束再怎么写?
效果
![4fb2644b34212e7e39d4cbc1ccb5a442.png](https://i-blog.csdnimg.cn/blog_migrate/9bde7c1494c8b96969950efcdab68e42.png)
大致说明一下:右边的器材安装数量排行就是按照前言中所说,因为前三名的背景图片是深蓝色的,往后的的都是浅蓝色的,于是就想了这样的办法,先输出前三条,然后在输出后面的信息。
实现
首先在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>
至此,效果就可以实现成如图所示。
更多推荐
所有评论(0)