本文主要给大家介绍基于vue的分页原生写法，代码分为html部分和js部分，简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
本文主要介绍基于vue的分页原生写法。
先po上效果图：
html部分，将page作为一个单独的组件
登录后复制
立即学习“前端免费学习笔记（深入）”；
js部分：
Vue.component("page", { template: "#page", data: function () { return { current: 1, // 当前页码 showItem: 5, // 最少显示5个页码 allpage: 13 // 总共的 } }, computed: { pages: function () { var pag = []; if (this.current (this.allpage - this.showItem)) { middle = (this.allpage - this.showItem) + 1 } while (i--) { pag.push(middle++); } } return pag } }, methods: { goto: function (index) { if (index == this.current) return; this.current = index; //这里可以发送ajax请求 } } }) var vm = new Vue({ el: '#app', }) 登录后复制
立即学习“前端免费学习笔记（深入）”；
css部分：
body { font-family: "Segoe UI"; } li { list-style: none; } a { text-decoration: none; } .pagination { position: relative; } .pagination li { display: inline-block; margin: 0 5px; } .pagination li a { padding: .5rem 1rem; display: inline-block; border: 1px solid #ddd; background: #fff; color: #0E90D2; } .pagination li a:hover { background: #eee; } .pagination li.active a { background: #0E90D2; color: #fff; }登录后复制
立即学习“前端免费学习笔记（深入）”；
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Angularjs实现控制器之间通信方式实例总结
Angular中使用better-scroll插件的方法_AngularJS
使用node打造自己的命令行工具方法教程
立即学习“前端免费学习笔记（深入）”；
以上就是基于vue.js实现的分页的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2753397.html
