分页功能通过允许用户以较小的块或页面可视化数据来增强用户体验。 下面介绍如何创建带分页的 Vue.js 组件，以便我们一次只能查看部分数据。
我将首先在我们的 JavaScript 对象中逐一进行分析，然后显示模板。
我唯一需要的本地数据是页码。
data(){ return { pageNumber: 0 // default to page 0 }}
登录后复制
对于 props 来说，数据是必要的，另外我还定义了 size 这个参数来保存每一页数据的数量的最大值。
立即学习“前端免费学习笔记（深入）”；
props:{ listData:{ type:Array, required:true }, size:{ type:Number, required:false, default: 10 }}
登录后复制
在 methods 中，我定义了下一页和上一页的两个方法：
methods:{ nextPage(){ this.pageNumber++; }, prevPage(){ this.pageNumber--; }}
登录后复制
我使用计算属性值来计算一共有多少页：
pageCount(){ let l = this.listData.length, s = this.size; return Math.floor(l/s);}
登录后复制
paginatedData 就是获取过滤后的数据的计算属性：
paginatedData(){ const start = this.pageNumber * this.size, end = start + this.size; return this.listData.slice(start, end);}
登录后复制
修改：在一开始我使用 .splice 来复制数组，但更完美的做法是使用 .slice 方法，在这里感谢 Alexander Karelas。
在 template 中：
- {{p.first}} {{p.last}} {{p.suffix}}
登录后复制
我希望在最开始或者最末尾阻止用户按下按钮，对于 prevPage 按钮，我加入了 :disabled=”pageNumber=0″ 而对于 nextPage 按钮，我加入 :disabled=”pageNumber >= pagecount -1″。
推荐教程：《JS教程》
以上就是在 Vue 中使用分页的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2728138.html
