这篇文章主要为大家详细介绍了vue2.0与bootstrap3实现列表分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了android九宫格图片展示的具体代码，供大家参考，具体内容如下
直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^_^
<!doctype html><html> <head> <meta charset="utf-8"> <title>使用vue2.0与bootstrap3进行简单列表分页</title> <link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script> </head> <body> <p class="bs-example" id="table"> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr v-if="listdata.length>0" v-for="item in listdata"> <th scope="row">{{item.id}}</th> <td>{{item.name}}</td> <td> <button v-on:click="edititem(item.id)" class="btn btn-default" >编辑</button> <button v-on:click="deleteitem(item.id)" class="btn btn-default" >删除</button> </td> </tr> <tr> <td colspan=3> <p id="pagelist"> <p class="row"> <p class="col-sm-6" style="line-height: 80px"> <p class="datatables_info" id="sample-table-2_info"> 共{{pagedata.total}}条，当前显示第 <span v-if="pagedata.pagesize==1 || pagedata.total == 0 || pagedata.total == 1"> {{pagedata.itemstart}}</span> <span v-else>{{pagedata.itemstart}}-{{pagedata.itemend}}</span> 条 </p> </p> <p class="col-sm-6"> <p class="datatables_paginate paging_bootstrap"> <ul class="pagination"> <li v-if="pagedata.curpage == 1 || pagedata.total == 0 || pagedata.total == 1" class="prev disabled"> <a>首页</a> </li> <li v-else class="prev"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changecurpage(1,pagedata.pagesize);"> 首页 </a> </li> <li v-if="pagedata.curpage == 1 || pagedata.total == 0 || pagedata.total == 1" class="prev disabled"> <a>上一页</a> </li> <li v-else class="prev"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changecurpage(pagedata.curpage-1,pagedata.pagesize);"> 上一页</i> </a> </li> <li v-if="pagedata.totalpage > 5 && pagedata.curpage > 3" class="next disabled"> <a>...</a> </li> <template v-for="pageitem in pagedata.pageindex"> <li v-if="pagedata.curpage == pageitem" class="active"> <a>{{pageitem}}</a> </li> <li v-else> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changecurpage(pageitem,pagedata.pagesize);"> {{pageitem}} </a> </li> </template> <li v-if="pagedata.totalpage > 5 && pagedata.curpage < pagedata.totalpage-2" class="next disabled"> <a>...</a> </li> <li v-if="pagedata.curpage == pagedata.totalpage || pagedata.total == 0 || pagedata.total == 1" class="next disabled"> <a>下一页</i></a> </li> <li v-else class="next"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changecurpage(pagedata.curpage+1,pagedata.pagesize);"> 下一页</i> </a> </li> <li v-if="pagedata.curpage == pagedata.totalpage || pagedata.total == 0 || pagedata.total == 1" class="next disabled"> <a>末页</a> </li> <li v-else class="next"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changecurpage(pagedata.totalpage,pagedata.pagesize);"> 末页 </a> </li> <template v-if="pagedata.totalpage > 5" class="next disabled"> <li> <input value="" ref="gopage" class="input-mini" type="text" style="height: 32px;width:40px;margin:auto 5px auto 20px;line-height: 24px;"> <label><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="gopage(pagedata.pagesize,pagedata.totalpage)">go</a></label> </li> </template> </ul> </p> </p> </p> </p> </td> <tr> </tbody> </table> </p> <script type="text/javascript"> function getdata($page,$pagesize){//获取数据，可使用各种语言替换^_^ var $data = []; for (var $i=($page-1)*$pagesize+1; $i <=$page*$pagesize ; $i++) { $data.push( { id:$i, name:'name'+$i }); } var $returndata = {'data':$data,'total':103}; return $returndata; } var vm = new vue({ el: '#table', data: { listdata:[], page: 1,//当前页码 pagesize: 10,//每页条数 total:0,//总数 pagedata: { curpage: 1, pagesize: 10, total: 0, totalpage: 0, pageindex: [], itemstart: 0, itemend: 0 } }, methods:{ listitems: function () {//列出需要的数据 var returndata =getdata(this.page,this.pagesize); this.listdata = returndata.data; this.total=returndata['total']; this.setpagelist(this.total, this.page, this.pagesize); }, edititem:function ($id) {//编辑操作在这儿哟 alert('编辑第'+$id+'条数据！'); }, deleteitem:function ($id) {//这里可以删除数据 alert('删除第'+$id+'条数据！'); }, setpagelist: function (total, page, pagesize) { total = parseint(total); var curpage = parseint(page); pagesize = parseint(pagesize); var totalpage = math.ceil(total / pagesize); var itemstart = (curpage - 1) * pagesize + 1; if (curpage == totalpage) { itemend = total; } else { itemend = curpage * pagesize; } var pageindex = []; if (curpage >= 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 <= 0) { pageindex = 1; this.$refs.gopage.value = 1; } else if (pageindex >= totalpage) { pageindex = totalpage; this.$refs.gopage.value = totalpage; } this.changecurpage(pageindex, pagesize); } } }); window.onload = function(){ console.log('hello world!'); vm.listitems(); }; </script> </body></html>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
详细介绍vue事件修饰符capture的使用
在node中如何实现更改头像
在react-router中刷新页面出现404问题
在js中如何对url实施对象化管理
在javascript中如何使用generator的方法
以上就是在vue2.0与bootstrap3中如何实现列表分页的详细内容。