基于vue.js实现分页查询功能

利用vue.js实现数据库分页，供大家参考，具体内容如下

最新项目有一个分页功能，画面风格很简朴给的样图就用【1】表示页码了，因此，我没有上网上找插件，自己简单的做了一个。作为菜鸟，代码可能有点青涩，请见谅。

除了某视频剪辑软件我还引用了引导程序的类和图标

超文本标记语言

div class=' paging ' ul class=' paging ' style=' margin : 13px ' Li class=' page-Li ' v-if=' page 1 ' a href=' JavaScript : void(0)；'@ click=' first pg()' style=' border : 0px；'span class=' glyphicon glyphicon-step-backward '/span/a/Li Li class=' page-Li ' v-else/Li Li class=' page-Li ' v-if=' page 1 ' a href=' JavaScript : void(0)；'@ click=' up()' style=' border : 0px；'span=' glyphicon glyphicon-chevron-left '/span/a/Li Li class=' page-Li ' v-else/Li Li class=' page-Li ' v-if=' show up 0 ' a href=' JavaScript : void(0)；'@ click=' show more 1()' style=' border : 0px；'./a/Li Li class=' page-Li ' v-else/Li Li v-for=' I in pages ' v-if=' ishowupideval ' a href=' JavaScript : void(0)；'@ click=' set page(I)' : class=' { colored : I==page } ' style=' border : 0px；[{ { I } }]/a/Li Li class=' page-Li ' v-if='摊牌=pages ' a href=' JavaScript : void(0)；@ click=' show more 2()' style=' border : 0px；'./a/Li Li class=' page-Li ' v-else/Li Li class=' page-Li ' v-if=' page pages ' a href=' JavaScript : void(0)；'@ click=' down()' style=' border : 0px；'span class=' glyphicon glyphicon-chevron-right '/span/a/Li Li class=' page-Li ' v-else/Li Li class=' page-Li ' v-if=' page pages ' a href=' JavaScript : void(0)；@ click=' lastpg()' style=' border : 0px；span=' glyphicon glyphicon-step-forward '/span/a/Li Li class=' page-Li ' v-else/Li/ul/div js

const listData={ initcount :0//选中的页号第：页，1/显示页码下限对决： 0,//显示页码上限showup : 0，}；$(function(){ new Vue({ El : ' # manageArea '，data : listData，methods : { set page : set page，up : up，down : down，firstpg : firstpg，lastpg : lastpg，showmore1 : showmore1，showmore2 : showmore2，}，})；设置摊牌();setShowup()；initAJax()；});//选中的页号函数设置页面(一){列表数据。page=I；设置摊牌();setShowup()；initAJax()；} //向上翻一页function up(){ if(listdata。第1页){ listdata。page=listdata。第1页；设置摊牌();setShowup()；initAJax()；} } //向下翻一页函数down(){ if(listdata。页面列表数据。页面){ listdata。page=listdata。第1页；设置摊牌();setShowup()；initAJax()；} } //直接到首页函数第一个pg(){ if(listdata。第1页){ listdata。page=1；设置摊牌();setShowup()；initAJax()；} } //直接到尾页函数lastpg(){ if(listdata。页面列表数据。页面){ listdata。page=listdata。页数；设置摊牌();setShowup()；initAJax()；} } //往前翻三页函数showmore1() { listData。摊牌-=3;列表数据。显示-=3；} //往后翻三页函数显示更多2(){ listdata。declarge=3；列表数据。显示=3；} //设置显示的页码下限函数设置摊牌(){ listData。摊牌=listdata。第2页；} //设置显示的页码上限函数setShowup(){ listdata。show up=listdata。第2页；}这样通过把选中的页码传到后台计算出限制开始条数的值如显示20条开始值就是（第一页)* 20;就可以了。从代码到描述都很简陋，还请大家对我的错误不足进行指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。