vue实现分页栏效果

{
 data:{
 list:[
 {user_id:1,nickName:'csdn1',sex:0,desc:'帅哥'},
 {user_id:2,nickName:'csdn2',sex:0,desc:'帅哥'},
 {user_id:3,nickName:'csdn3',sex:1,desc:'美女'},
 ...
 ],
 pageInfo:{
 totalItem:44,
 totalPage:3,
 perPage:15,
 curPage:1
 }
 }
}

 // get请求获取用户数据函数
 getRequestFunc: function(formData, requestUrl){
 var that = this;
 $.get(
 requestUrl,//请求数据路径，即接口
 formData,//请求数据参数，除了必需的参数，还有page这个非必须的参数，它的作用是获取当前页的数据列表。例如：page=10时，获取的是第十页的数据
 res => {
 that.personLists = res.data.list;//用户数据列表
 that.pageInfo = res.data.pageInfo;//这个数据里面包括：当前页、总页数、当前页数目等
 that.curPage = res.data.paging.curPage;//当前页
 that.totalPage = res.data.paging.totalPage;//总页数
 //用于处理显示分页栏信息
 that.handlePageBar(that.totalPage) 
 });
 },

// 处理分页栏
 handlePageBar: function(pageNum){
 var that = this;
 if(that.pageArr == '' || that.pageArr == null){
 var pageArr = [];
 if(pageNum > 10){
 for(var i = 1; i < 11; i++){
 pageArr.push(i);
 }
 }else{
 for(var i = 1; i < pageNum + 1; i++){
 pageArr.push(i);
 }
 }
 that.pageArr = pageArr;
 }else if(that.pageArr.length < 10){
 that.pageArr = pageArr;
 }else{
 if((that.pageArr)[9] == that.page-1){
 that.handleNextExtremePage(pageNum);
 }else if((that.pageArr)[0] == parseInt(that.page)+1){
 that.handlePreExtremePage(pageNum);
 }
 }
 },
 
​ // 处理点击尾数为0跳转到下一页面时的分页栏显示
 handleNextExtremePage: function(pageNum){
 var that = this;
 that.addNum += 10;
 var pageArr = [];
 if(pageNum > that.addNum && pageNum < that.addNum+10){
 for(var i = that.addNum + 1; i < pageNum + 1; i++){
 pageArr.push(i);
 }
 }else{
 var pageArr = [];
 for(var i = that.addNum + 1; i < that.addNum + 11; i++){
 pageArr.push(i);
 }
 }
 that.pageArr = pageArr;
 },
 
 // 处理点击尾数为1跳转到上一页面时的分页栏显示
 handlePreExtremePage: function(pageNum){
 var that = this;
 that.addNum -= 10;
 var pageArr = [];
 if(that.addNum >= 0){
 for(var i = that.addNum + 1; i < that.addNum + 11; i++){
 pageArr.push(i);
 }
 }
 that.pageArr = pageArr;
 },

​<div class="contentBottom">
 <span>共{{pageInfo.totalItem}}条，共{{pageInfo.totalPage}}页，当前页{{personLists.length}}条</span>
 <span class="indexPage" @click="goToIndexPage">首页</span>
 <span class="prePage" @click="goToPrePage">&lt;</span>
 <span class="preTen" v-show="pageArr[0] > 10 ? true : false" @click="preTen">...</span>
 <span class="knownPage" :class="{'addBgClass': index == curPage}" v-for="index in pageArr" @click="appointPage" :data-curPage="index">{{index}}</span>
 <span class="nextTen" v-show="pageArr.length < 10 ? false : true" @click="nextTen">...</span>
 <span class="nextPage" @click="goToNextPage">></span>
 <span class="lastPage" @click="goToLastPage">尾页</span>
 <input type="text" class="inputPage" ref="inputPage" v-show="totalPage > 10 ? true : false" />
 <span class="jumpToInputPage" @click="jumpToInputPage" v-show="totalPage > 10 ? true : false">跳转</span>
</div>

​.contentBottom{
 width: 98%;
 height: 30px;
 line-height: 30px;
 text-align: right;
 margin-top: 50px;
 padding: 0 1%;
 font-size: 14px;
 }
 
 .prePage,.knownPage,.nextPage,.nextTen,.preTen,.indexPage,.lastPage,.jumpToInputPage{
 width: 30px;
 display: inline-block;
 text-align: center;
 border: 1px solid #CCC;
 cursor: pointer;
 }
 
 .indexPage,.lastPage,.jumpToInputPage{
 font-size: 14px;
 padding: 0 8px;
 }
 
 .inputPage{
 width: 36px;
 height: 27.5px;
 vertical-align: top;
 }
 
 .indexPage,.inputPage{
 margin-left: 10px;
 }
 
 .prePage:hover,.knownPage:hover,.nextPage:hover,.preTen:hover,.nextTen:hover,.indexPage:hover,.lastPage:hover,.jumpToInputPage:hover{
 background: rgba(230,230,230,1)
 }
 
​ .addBgClass{
 background: rgba(230,230,230,1);
 }

// 显示后十页。只有在page大于10时这个扩充按钮才会显示
 nextTen: function(){
 var that = this;
 var pageNum = that.totalPage;
 that.handleNextExtremePage(pageNum);
 },
 
 // 显示前十页
 preTen: function(){
 var that = this;
 var pageNum = that.totalPage;
 that.handlePreExtremePage(pageNum);
 },
 
 // 拉取指定页的码库数据
 appointPage: function(e){
 var page = e.target.dataset.curPage;
 this.curPage = page;
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: page
 };
 this.getRequestFunc(formData);
 },
 
 // 拉取上一页码库数据
 goToPrePage: function(){
 var that = this;
 that.curPage = parseInt(that.curPage) - 1;
 if(that.curPage < 1){
 that.curPage = that.curPage + 1;
 //狼蚁网站SEO优化用的是一个模态框，可不写
 var promptText = '这已经是第一页了！';
 that.callPromptBox(promptText)
 }else{
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },
 
 // 拉取下一页码库数据
 goToNextPage: function(){
 var that = this;
 that.curPage = parseInt(that.curPage ) + 1;
 if(that.curPage > that.totalPage){
 that.curPage = that.curPage - 1;
 var promptText = '这已经是最后一页了！';
 that.callPromptBox(promptText)
 }else{
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },
 
 // 直接跳转到首页，即第一页
 goToIndexPage: function(){
 var that = this;
 if(that.curPage== 1){
 var promptText = '这已经是第一页了！';
 that.callPromptBox(promptText)
 }else{
 that.curPage= 1;
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 },
 
 // 直接跳转到尾页
 goToLastPage: function(){
 var that = this;
 if(that.curPage== that.totalPage){
 var promptText = '这已经是最后一页了！';
 that.callPromptBox(promptText)
 }else{
 that.curPage= that.totalPage;
 var formData = {
 user_id: this.user_id,
 nickName: this.nickName,
 page: that.curPage
 };
 that.getRequestFunc(formData);
 }
 }, ​