这篇文章主要为大家详细介绍了vue2.0与bootstrap3实现列表分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下
直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^_^
nbsp;html>使用vue2.0与bootstrap3进行简单列表分页
登录后复制
#名称
操作
0″ v-for=”item in listData”>
{{item.id}}{{item.name}}
共{{pageData.total}}条，当前显示第 {{pageData.itemStart}} {{pageData.itemStart}}-{{pageData.itemEnd}} 条
首页 首页 上一页 上一页 5 && pageData.curPage > 3″ class=”next disabled”> … {{pageItem}} {{pageItem}} 5 && pageData.curPage … 下一页 下一页 末页 末页 5″ class=”next disabled”> function getData($page,$pageSize){//获取数据，可使用各种语言替换^_^ var $data = []; for (var $i=($page-1)*$pageSize+1; $i = 1 && curPage <= totalPage) { if (totalPage < 5) {//5页以内 for (var $i = 1; $i <= totalPage; $i++) { pageIndex.push($i); } } else {//大于5页 if (curPage == 1) { pageIndex = [curPage, curPage + 1, curPage + 2, curPage + 3, curPage + 4]; } else if (curPage == 2) { pageIndex = [curPage – 1, curPage, curPage + 1, curPage + 2, curPage + 3]; } else if (curPage == totalPage – 1) { pageIndex = [curPage – 3, curPage – 2, curPage – 1, curPage, totalPage]; } else if (curPage == totalPage) { pageIndex = [curPage – 4, curPage – 3, curPage – 2, curPage – 1, curPage]; } else { pageIndex = [curPage – 2, curPage – 1, curPage, curPage + 1, curPage + 2]; } } } this.pageData.curPage = curPage; this.pageData.pageSize = pageSize; this.pageData.total = total; this.pageData.totalPage = totalPage; this.pageData.pageIndex = pageIndex; this.pageData.itemStart = itemStart; this.pageData.itemEnd = itemEnd; }, changeCurPage: function (page, pageSize) {//换页 this.page = page; this.pageSize = pageSize; this.listItems(); }, goPage: function (pageSize, totalPage) {//跳转页 var pageIndex = this.$refs.goPage.value; if (pageIndex = totalPage) { pageIndex = totalPage; this.$refs.goPage.value = totalPage; } this.changeCurPage(pageIndex, pageSize); } } }); window.onload = function(){ console.log('Hello World!'); vm.listItems(); };
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
立即学习“前端免费学习笔记（深入）”；
详细介绍Vue事件修饰符capture的使用
在node中如何实现更改头像
在react-router中刷新页面出现404问题
在js中如何对url实施对象化管理
在JavaScript中如何使用Generator的方法
以上就是在vue2.0与bootstrap3中如何实现列表分页的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2748865.html
