vue中如何使用vi-for限制遍历的条数？只查询前三条、查询4-6条怎么实现？

“

大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。

”

前言

今天整理个简单的功能，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条怎么实现？相关推荐

Vue中input限制数字不能大于某个动态的数或者长度
例如要编辑已支付不能大于预估成本 <template slot-scope="{row}"><template v-if="row.rowEdit&qu ...
php中统计记录条数,使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
例如这样一个表,我想统计email和passwords都不相同的记录的条数 CREATE TABLE IF NOT EXISTS `test_users` ( `email_id` int(11) u ...
vue中如何在地图中标点…
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 前言昨天分享了下vue中v-for的一些特殊用法,料想标题给写成了vi-for-太粗心了.文章连接在这里: vue中 ...
vue中style的scoped属性的设计方式
vue中style的scoped属性这里是怎实现的呢? scoped三条渲染规则给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性在每句css选 ...
Vue中浏览器的的前进和后退
项目开发的时候,有时候可能需要我们来对页面后退和前进,这个东西跟浏览器自带的前进后退功能很像,下面来大致讲一下在vue中浏览器的前进和后退一.后退功能 vue中的后退有好多种方法可以使用,使用这些方 ...
vue中获取本地IP地址
vue中获取本地IP地址 IP地址需要通过js获取: 网上有很多查询接口可以获取到IP,查到的搜狐的比较多,我这里就用搜狐的: http://pv.sohu.com/cityjson?ie=utf-8 ...
vue中axios利用blob实现文件浏览器下载
背景在vue中,使用axios向后台请求数据,但只接收返回的response并不能实现浏览器下载,所以需要借助于blob实现文件的浏览器下载,分为两种情况,一种是get请求,使用params,另一种 ...
二叉树的前、中、后的非递归遍历
题目实现一个链式存储的二叉树,采用非递归的形式,按照前.中.后序的顺序遍历二叉树. 代码 /** * 二叉树的前.中.后序的非递归遍历 **/#include <iostream> us ...
ViewUI在vue中如何表格分页
$ npm install view-design --save//mian.js中引入 import ViewUI from 'view-design'; import 'view-design/d ...

vue中如何使用vi-for限制遍历的条数？只查询前三条、查询4-6条怎么实现？

前言

效果

实现

vue中如何使用vi-for限制遍历的条数？只查询前三条、查询4-6条怎么实现？相关推荐

最新文章

热门文章