效果如下：

HTML：

<ul class="page f16 tc mt30"> <li> <span v-if="page > 1"><b @click="page--,pageClick()">上一頁</b></span> <span v-if="page == 1">上一頁</span> <span v-for="index in pageAll" :key="index" :class="{'active':page == index}" @click="goPage(index)">{{index}}</span> <span v-if="page!=pageAll"><b @click="page++,pageClick()">下一頁</b></span> <span v-if="page == pageAll">下一頁</span> </li> <li>共{{pageAll}}頁</li> <li>到<input type="text" class="int02" v-model="jumpPage"> 頁<input type="button" class="bt03" value="確定" @click="goPage(jumpPage)"></li> </ul>

CSS：

.page li{display:inline-block;margin:0 5px;} .page li span{display:inline-block;padding:5px 10px;border:1px solid #dfdfdf;margin:0 5px;border-radius:5px;cursor:pointer;} .page li span.active,.page li span:hover{border:1px solid #316dd9;background:#316dd9;color:#fff;} .page b{display:block;font-weight:normal;} .page .int02,.page .bt03{line-height:32px;border:1px solid #ccc;vertical-align:middle;margin:0 10px;border-radius:5px;} .page .int02{width:40px;text-align:center;} .page .bt03{background:#316dd9;color:#fff;border:none;padding:0 30px;line-height:36px;margin-left:20px;}

JS：

data(){return{listData:"",//旅行社列表數據搜索結果數據// pageSize:15, //每頁個數，后臺默認15page:1,//當前頁碼，不傳默認第一頁pageAll:"", //數據總頁數jumpPage:"",//跳轉頁碼} }, methods：{//獲取旅行社列表數據 keywords words搜索關鍵字,region_id id區域id,page onPage當前頁碼getTravel(event){....數據列表獲取.....if (response.data.status==1) {console.log(response.data.data);this.pageAll = response.data.data.count;this.listData = response.data.data.data;}else{console.log(response.data.info);}....數據列表獲取.....},//點擊上一頁下一頁pageClick(){ this.getTravel(this.page); //獲取列表數據 window.scrollTo(0,500); //頁面滾動到頂部},//點擊頁碼或跳轉指定頁碼goPage(event){if(event != this.page && event != ""){this.page = eventthis.getTravel(this.page); //獲取列表數據window.scrollTo(0,500); //頁面滾動到頂部}},}, computed: {pagesAll(){// 開始數字var leftNum = 1;// 結束數字var rightNum = this.pageAll;// 存儲頁碼數組var pageArray = [];// 顯示頁碼的數量 最好是個單數var showNum = 5;// 因為是單數向上取整獲取到中間的數字var centerNum = Math.ceil(showNum/2);// 判斷分析當總頁數超過showNum展示頁數時，需要判斷分頁情況//1、在最左邊第一個或者在centerNum的前面//2、在中間//3、最右邊最后一個if(this.pageAll >= showNum){ // 中間centerNum時左右都加上（centerNum-1)if(this.page > centerNum && this.page < this.pageAll - (centerNum - 1)){//一定要用Number格式化一下獲取的數據,防止獲取的是字符串而不是數字leftNum = Number(this.page) - (centerNum - 1)rightNum = Number(this.page) + (centerNum - 1)}else{//最左邊或者在showNum的中間if(this.page <= centerNum){leftNum = 1rightNum = showNum// 最右邊時結束是總條數，開始是showNum減去1}else{rightNum = this.pageAllleftNum = this.pageAll - (showNum - 1)}}}while (leftNum <= rightNum){pageArray.push(leftNum)leftNum ++}return pageArray}}

?劃重點：

獲取過來的頁碼數據一定要用Number()格式化一下！防止獲取的是字符串而不是數字！T_T

總結

以上是生活随笔為你收集整理的Vue分页及页码跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。