写之前先抱怨几句。本来一心一意做。网开发的，渐渐地成了只做前端。最近项目基本都用爪哇岛做后台，我们这些。网的就成了前端，不是用wpf做界面，就是用超文本标记语言写网页面。

深知自己前端技术不足，以前虽说用ASP。网前后台都做，但是，对于前端都是用现成的射流研究…库和页面模板，对于vue.js等框架基本没有接触过。

只怪自己不会写java，最近做一个项目，负责前端，后台传来数据不分页，前端收到所有数据后自己分页。我尽是无语。

正好最近在看vue.js。这个页面就用它来实现吧。顺便总结下。

效果图：

语法：

数据绑定{{.}}或者v型

TD { { DataItem }。id } }/TD输入v-model=' message '事件绑定v-on

th v-:点击='排序依据('标识')'标识/th循环v-for

选项v-for=' arrPageSize '中的项value=' { { item } } ' { { item } }/option判断垂直中频

span v-if=' item=' 1 ' class=' BTN BTN-默认' v-: click=' show page(1，$event)'首页/span过滤器Vue。过滤器

//定义Vue.filter('name '，function(value){ 0返回值* .5;});//使用TD { { DataItem }。age | name } }/t输入v-model=' message | name '排序订单方

tr-v-for=' Arraydata |按排序参数排序排序排序类型' TD { { DataItem }。id } }/TD TD { { DataItem }。name } }/TD { { DataItem。age } }/TD/trhtml

div id=' test ' class=' form-group ' div class=' form-group ' div class=' page-header '数据/div table class=' table table-bordered table-responsive table-striped ' tr th v-: click=' sort by(' ID ')' ID/th姓名/th v-:点击='排序依据'('年龄')年龄/th/tr v-for=' Arraydata |按排序参数排序排序类型' TD { { DataItem。id } }/TD { { DataItem。name } }/TD { { DataItem。age } }/TD { { DataItem。age } }/TD/tr/table div class=' page-header '分页/div class=' pager ' id=' pager ' span class=' form-inline ' select class=' form-control ' v-model=' page size ' v-: change=' show page(page current，$event，true)' number option v-for=' arrPageSize中的项value=' { { item } } ' { { item } }/option/select/span模板v-for='页数1中的项span v-if=' item=' 1 ' class=' BTN BTN BTN-default ' v-3首页/span span v-if=' item==1 ' class=' BTN BTN-默认' v-: click=' show page(当前页面-1，$event)'上一页/span span v-if=' item=' 1 ' class=' BTN BTN-默认' v-: click=' show page(item，$ event)' { { item } }/span v-if=' item=' 1 items showpagesststart-1 ' class=' BTN BTN-默认禁用' ./span span v-if=' item 1 item=页数-1 item=showpagestatitem=showPageEnditem=页数' class=' BTN BTN-默认' v-: click=' show page(item，$ event)' { { item } }/span v-if=' item=' page counteritems showpageend 1 ' class=' BTN BTN BTN-默认禁用'./span span v-if=' item==页数项！=1 ' class=' BTN BTN-默认' v-: click=' show page(item，$event)' { { item } }/span span v-if=' item=' page count ' class=' BTN BTN-默认' v-: click=' show page(当前页面1，$ event)'下一页/span span v-if=' item==页数' class=' BTN BTN-默认值' v-: click='显示页面(页数，$event)尾页/span/template span class=' form-inline ' input class=' page index form-control ' style=' width :60 px；text-align : center ' type=' text ' v-model=' page current | only numeric ' v-: key up。输入='显示页面(当前页面，$event，true)'//span span { {当前页面} }/{ {页面计数} }/span/div/div JavaScript

//只能输入正整数过滤器Vue.filter('onlyNumeric '，{ //model - view //在更新"输入"元素之前格式化值read:函数(val){ return val；},//视图-模型//在写回数据之前格式化值write:函数(瓦尔，旧瓦尔){ var number=val.replace(/[^d]/g ' ')返回isNaN(数字)？1 : parseFloat(数字。tofixed(2))})//模拟获取数据var getData=function(){ var result=[]；for(var I=0；I 500 I){ 0结果[i]={name:'test' i，id:i，age:(Math.random()*100).toFixed()}；}返回结果；} var vue=new Vue({ el: '#test '，//加载完成后执行ready :函数(){ this。arraydata all=GetDATa()；这个。总计数=这个。arraydataall。长度；this.showPage(this.pageCurrent，null，true)；}，data: { //总项目数totalCount: 200，//分页数arrPageSize:[10，20，30，40]，//当前分页数pageCount: 20，//当前页面pageCurrent: 1，//分页大小pagesize: 10，//显示分页按钮数showPages: 11，//开始显示的分页按钮showPagesStart: 1，//结束显示的分页按钮showPageEnd: 100，//所有数据arrayDataAll:[]，//分页数据arrayData: []，//排序字段sortparam: ' '，//排序方式sorttype:1，}，methods: { //分页方法显示页面：函数(pageIndex，$event，force refresh){ if(page index 0){ if(page index this。页数){ page index=this。页数；} //判断数据是否需要更新var currentPageCount=数学。天花板(这个。总数/这个。页面大小)；if (currentPageCount！=这个。页数){页面索引=1；这个。页数=CurrentPageCount} else if(这个。page current==page index CurrentPageCount==this。(强制刷新)=' undefined ')的页数类型{ console。日志(“不刷新”)；返回；} //处理分页点中样式var buttons=$('#pager ').find(' span ')；for(var I=0；长度；i ) { if (buttons.eq(i)).html()！=pageIndex) { buttons.eq(i).移除CLaSS(' active ')；} else { buttons.eq(i).添加CLaSS(' active ')；} } //从所有数据中取分页数据var新页面信息=[]；for(var I=0；I this . pagesizei){ var index=I(page index-1)* this。页面大小；if(索引这个。总计数-1)中断；新页面信息[新页面信息。长度]=这个。array data all[index]；}这个。当前页面=页面索引；这个。arraydata=新页面信息；//计算分页按钮数据如果(这个。数一下这个。显示页面){ if(page index=(this。显示页面-1)/2){这个。显示页面开始=1；这个。显示页面结束=这个。显示第1页；控制台。log(' show page 1 ')} else if(page index=this。页数-(这个。显示页面-3)/2){这个。显示页面开始=这个。页数-这个。显示第2页；这个。显示页面结束=这个。页数；控制台。日志('显示第2页')} else { console。记录(“显示第3页”)这一点。show page sstart=page index-(this。show page-3)/2；这个。show page end=页面索引(这。show page-3)/2；} } } //排序}，sortBy:函数(排序参数){这个。排序参数=排序参数；这个。排序类型=这个。排序类型==-1？1 : -1;} } });参考网址：Vue.js结合引导程序实现分页控件

源码下载：vue.js分页

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