vue怎么实现分页,vue如何实现分页显示数据
这篇文章主要为大家介绍了如何实现某视频剪辑软件前端分页和后端分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
目录
1:前端手写分页（数据量小的情况下)2:后端分页，前端只需要关注传递的页，面，张，版和页面大小总结
1：前端手写分页(数据量小的情况下)
前端需要使用薄片截取：tableData((第一页)pageSize，pagepageSize)
2：后端分页，前端只需要关注传递的page和pageSize
3：前端手写分页按钮
身体
div id=应用程序
table class= table table-bordered table-condensed
tr class=bg-primary
th class=文本中心排序/th
th class=文本中心用户姓名/th
th class=文本中心用户性别/th
th class=文本中心所在城市/th
/tr
tr class= text-center active v-for=(v，i) in list :key=i
td{{num(i)}}/td
！- td{{params.pagesize}}/td -
td{{v.name}}/td
td{{v.sex}}/td
td{{v.addr}}/td
/tr
/表格
导航aria-label=页面导航style= text-align:center；
ul class=分页
！-上一页-
Li @ click= prePage():class= { disabled :params。page==1 }
一首咏叹调-label=Previous
span aria-hidden=truelaquo ./span
/a
/李
Li:class= { active :params。page==page } v-for=(page，index)in pages :key= index @ click= cur page(page)
a style= cursor:pointer；
{{page}}
/a
/李
！-下一页-
李：class= { disabled :params。page==total page } @ click= next()
一首咏叹调-label=下一首
span aria-hidden=trueraquo ./span
/a
/李
/ul
/导航
/div
/body
window.onload=function () {
//1s内只允许发送请求（出发事件)一次（可多次点击)节流喉咙
新Vue({
埃尔： #app ，
数据：{
参数：{
第一页，
页面大小：20,
名称：""
},
列表：[],
总计：0,//总的条数
totalPage:0，//总的页数
标志：假，
},
已创建(){
this.getData()
},
计算值：{
pages() {
让总页数=这个。总页数；
让page=this。参数。页面；
//总的页数小于10页
如果(共10页)返回总页数；
//总的页数大于10页添加省略号
if(page=5) { //前五页
//(1) 页码小于5左边显示六个
return [1，2，3，4，5，6，.,总页数]
} else if (page=totalPage - 5) { //后五页
console.log(触发)
//(2) 页码大于总页数-5 右边显示六个
return [1，.,总页数-5,总页数-4,总页数-3,总页数-2,总页数-1,总页数]
} else { //中间五页
//(3)页码在5-(共5页)之间左边区间不能小于5右边区间不能大于总页数总页数，注意左边的当前页-数字不能小于1, 右边的当前页数字不能大于总页数
return [1，.,第一页，第一页，第2页，第3页，.,总页数]
}
},
num() {
让{ pagesize，page}=this.params
//(1-1) * 10 10 0 1=1;
//(2-1) * 10 10 0 1=11
//第一页=(当前页-1 )* 每页的条数索引值一保证是从一开始的
return i=(page - 1) * pagesize i 1 //(当前页- 1 * 每页的条数)索引值一
}
},
方法：{
getData() {
if(this.flag)返回；
this.flag=true
//下面就是相当于一个定时器
axios。get( http://localhost:3000/user/list page ，{params:this.params}).然后(res={
console.log(res ，res.data.users)
让{ total，users }=RES . data。用户；
this.total=总计
这个。总页数=数学。ceil(这个。总计/本。参数。pagesize)；
this.list=用户
this.flag=false
})
},
curPage(page) {
if(page== . )返回
if(this.flag)返回；
这个。参数。page=页面；
this.getData()
},
prePage() {
//if(this.params.page== . )返回
if(this.params.page 1) {
if(this.flag)返回；
-这个。参数。页面；
console.log(page ，this.params.page)
this.getData()
}
},
下一个(){
//if(this.params.page== . )返回
if(this.flag)返回；
console.log(执行，this.totalPage)
如果(这个。参数。呼叫这个。总页数){
这个。参数。页面；
console.log(page ，this.params.page)
this.getData()
}
},
}
})
}
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。