注：大部分翻页可直接套用现成框架或样式

1、效果图：

代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue-router</title> <script src="js/vue.min.js" ></script> <style> 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; } </style></head><body> <script type="text/x-template" id="page"> <ul class="pagination" > <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li> <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index"> <a href="#" >{{index}}</a> </li> <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li> </ul> </script> <div id="app"> <page></page> </div><script> Vue.component("page",{ template:"#page", data:function(){ return{ current:1, showItem:5, allpage:13 } }, computed:{ pages:function(){ var pag = []; // 1<5 if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数 //总页数和要显示的条数那个大就显示多少条 var i = Math.min(this.showItem,this.allpage); while(i){ pag.unshift(i--); } }else{ //当前页数大于显示页数了 var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始 i = this.showItem; if( middle > (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',})</script></body></html>2、效果图


代码如下：

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta charset="utf-8"><title></title><meta name="keywords" content="" /><meta name="description" content="" /><script type="text/javascript" src="js/vue.min.js"></script><style>.page-bar{ margin:40px;}ul,li{ margin: 0px; padding: 0px;}li{ list-style: none}.page-bar li:first-child>a { margin-left: 0px}.page-bar a{ border: 1px solid #ddd; text-decoration: none; position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer}.page-bar a:hover{ background-color: #eee;}.page-bar a.banclick{ cursor:not-allowed;}.page-bar .active a{ color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7;}.page-bar i{ font-style:normal; color: #d44950; margin: 0px 4px; font-size: 12px;}</style></head><body> <div class="page-bar"> <ul> <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li> <li v-if="cur==1"><a class="banclick">上一页</a></li> <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> <a v-on:click="btnClick(index)">{{ index }}</a> </li> <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li> <li v-if="cur == all"><a class="banclick">下一页</a></li> <li><a>共<i>{{all}}</i>页</a></li> </ul></div><script type="text/javascript">var pageBar = new Vue({ el: '.page-bar', data: { all: 8, //总页数 cur: 1//当前页码 }, watch: { cur: function(oldValue , newValue){ console.log(arguments); } }, methods: { btnClick: function(data){//页码点击事件 if(data != this.cur){ this.cur = data } }, pageClick: function(){ console.log('现在在'+this.cur+'页'); } }, computed: { indexs: function(){ var left = 1; var right = this.all; var ar = []; if(this.all>= 5){ if(this.cur > 3 && this.cur < this.all-2){ left = this.cur - 2 right = this.cur + 2 }else{ if(this.cur<=3){ left = 1 right = 5 }else{ right = this.all left = this.all -4 } } } while (left <= right){ ar.push(left) left ++ } return ar } }})</script></body></html>