互联网网站开发的未来方向,wordpress 网站前端显示,排名公式,具有价值的做网站“大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;雄雄的小课堂。”前言今天整理个简单的功能#xff0c;vue中的v-for如何限制遍历输出的数据#xff0c;比如我想在一个存放10条数据的集合中只输出3条怎么写#xff1f;只想从第四条开始输出到第10条… “大家好我是雄雄欢迎关注微信公众号雄雄的小课堂。”前言今天整理个简单的功能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-3div classqicai_orderby_item v-for(item,index) in equipmentCountByChangList.slice(0,3)span{{ index1 }}/span{{item.names}}b styledisplay: inline-block;float: right;margin-right: 20px;{{item.counts}}/b/div4-后面所有div classqicai_orderby_item from4 v-for(item,index) in equipmentCountByChangList.slice(3)span{{ index4 }}/span{{item.names}}b styledisplay: inline-block;float: right;margin-right: 20px;{{ item.counts }}/b/div至此效果就可以实现成如图所示。
