效果如下：

HTML：

<ul class="page f16 tc mt30"> <li> <span v-if="page > 1"><b @click="page--,pageClick()">上一頁(yè)</b></span> <span v-if="page == 1">上一頁(yè)</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()">下一頁(yè)</b></span> <span v-if="page == pageAll">下一頁(yè)</span> </li> <li>共{{pageAll}}頁(yè)</li> <li>到<input type="text" class="int02" v-model="jumpPage"> 頁(yè)<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:"",//旅行社列表數(shù)據(jù)搜索結(jié)果數(shù)據(jù)// pageSize:15, //每頁(yè)個(gè)數(shù)，后臺(tái)默認(rèn)15page:1,//當(dāng)前頁(yè)碼，不傳默認(rèn)第一頁(yè)pageAll:"", //數(shù)據(jù)總頁(yè)數(shù)jumpPage:"",//跳轉(zhuǎn)頁(yè)碼} }, methods：{//獲取旅行社列表數(shù)據(jù) keywords words搜索關(guān)鍵字,region_id id區(qū)域id,page onPage當(dāng)前頁(yè)碼getTravel(event){....數(shù)據(jù)列表獲取.....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);}....數(shù)據(jù)列表獲取.....},//點(diǎn)擊上一頁(yè)下一頁(yè)pageClick(){ this.getTravel(this.page); //獲取列表數(shù)據(jù) window.scrollTo(0,500); //頁(yè)面滾動(dòng)到頂部},//點(diǎn)擊頁(yè)碼或跳轉(zhuǎn)指定頁(yè)碼goPage(event){if(event != this.page && event != ""){this.page = eventthis.getTravel(this.page); //獲取列表數(shù)據(jù)window.scrollTo(0,500); //頁(yè)面滾動(dòng)到頂部}},}, computed: {pagesAll(){// 開(kāi)始數(shù)字var leftNum = 1;// 結(jié)束數(shù)字var rightNum = this.pageAll;// 存儲(chǔ)頁(yè)碼數(shù)組var pageArray = [];// 顯示頁(yè)碼的數(shù)量 最好是個(gè)單數(shù)var showNum = 5;// 因?yàn)槭菃螖?shù)向上取整獲取到中間的數(shù)字var centerNum = Math.ceil(showNum/2);// 判斷分析當(dāng)總頁(yè)數(shù)超過(guò)showNum展示頁(yè)數(shù)時(shí)，需要判斷分頁(yè)情況//1、在最左邊第一個(gè)或者在centerNum的前面//2、在中間//3、最右邊最后一個(gè)if(this.pageAll >= showNum){ // 中間centerNum時(shí)左右都加上（centerNum-1)if(this.page > centerNum && this.page < this.pageAll - (centerNum - 1)){//一定要用Number格式化一下獲取的數(shù)據(jù),防止獲取的是字符串而不是數(shù)字leftNum = Number(this.page) - (centerNum - 1)rightNum = Number(this.page) + (centerNum - 1)}else{//最左邊或者在showNum的中間if(this.page <= centerNum){leftNum = 1rightNum = showNum// 最右邊時(shí)結(jié)束是總條數(shù)，開(kāi)始是showNum減去1}else{rightNum = this.pageAllleftNum = this.pageAll - (showNum - 1)}}}while (leftNum <= rightNum){pageArray.push(leftNum)leftNum ++}return pageArray}}

?劃重點(diǎn)：

獲取過(guò)來(lái)的頁(yè)碼數(shù)據(jù)一定要用Number()格式化一下！防止獲取的是字符串而不是數(shù)字！T_T

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。