小編給大家分享一下怎么基于vue.js實現(xiàn)分頁查詢功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來客戶和效益!成都創(chuàng)新互聯(lián)為您提供成都網(wǎng)站建設(shè)，五站合一網(wǎng)站設(shè)計制作，服務(wù)好的網(wǎng)站設(shè)計公司，網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計負(fù)責(zé)任的成都網(wǎng)站制作公司!

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

具體內(nèi)容如下

最新項目有一個分頁功能，畫面風(fēng)格很簡樸給的樣圖就用【1】表示頁碼了， 因此，我沒有上網(wǎng)上找插件，自己簡單的做了一個。作為菜鳥，代碼可能有點青澀，請見諒。  

 

除了vue我還引用了Bootstrap的類和圖標(biāo)

html

<div class="paging">
  <ul class="pagination" >
  <li class="page-li" v-if="page>1"><a href="javascript:void(0);" @click="firstpg()" ><span class="glyphicon glyphicon-step-backward"></span></a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="page>1"><a href="javascript:void(0);" @click="up()" ><span class="glyphicon glyphicon-chevron-left"></span></a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="showup>0"><a href="javascript:void(0);" @click="showmore1()" >...</a></li>
  <li class="page-li" v-else></li>
  <li v-for="i in pages" v-if="i>showup&&i<showdown"><a href="javascript:void(0);" @click="setpage(i)" :class="{colorred:i==page}" >[{{i}}]</a></li>
  <li class="page-li" v-if="showdown<=pages"><a href="javascript:void(0);" @click="showmore2()" >...</a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="page<pages"><a href="javascript:void(0);" @click="down()" ><span class="glyphicon glyphicon-chevron-right"></span></a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="page<pages"><a href="javascript:void(0);" @click="lastpg()" ><span class="glyphicon glyphicon-step-forward"></span></a></li>
  <li class="page-li" v-else></li>
  </ul>
 </div>

js

const listData = { 
initcount : 0, 
//選中的頁號 
page : 1, 
//顯示頁碼下限 
showdown : 0, 
//顯示頁碼上限 
showup : 0, 
 }; 
$(function() { 
 new Vue({ 
 el : ‘#manageArea', 
 data : listData, 
 methods : { 
 setpage : setpage, 
 up : up, 
 down : down, 
 firstpg : firstpg, 
 lastpg : lastpg, 
 showmore1 : showmore1, 
 showmore2 : showmore2, 
 }, 
}); 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
}); 
//選中的頁號 
function setpage(i) { 
 listData.page = i; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
//向上翻一頁 
function up() { 
 if (listData.page > 1) { 
 listData.page = listData.page - 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
} 
//向下翻一頁 
function down() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.page + 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到首頁 
function firstpg() { 
 if (listData.page > 1) { 
 listData.page = 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到尾頁 
function lastpg() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.pages; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//往前翻三頁 
function showmore1() { 
 listData.showdown -= 3; 
 listData.showup -= 3; 
} 
//往后翻三頁 
function showmore2() { 
 listData.showdown += 3; 
 listData.showup += 3; 
} 
//設(shè)置顯示的頁碼下限 
function setShowdown() { 
 listData.showdown = listData.page + 2; 
} 
//設(shè)置顯示的頁碼上限 
function setShowup() { 
 listData.showup = listData.page - 2; 
}

這樣通過把選中的頁碼傳到后臺 計算出 limit 開始條數(shù)的值 如顯示20條 開始值就是 （page-1）*20;就可以了。從代碼到描述都很簡陋，還請大家對我的錯誤不足進(jìn)行指正。

以上是“怎么基于vue.js實現(xiàn)分頁查詢功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：怎么基于vue.js實現(xiàn)分頁查詢功能
分享鏈接：http://aaarwkj.com/article6/ihpdog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、、網(wǎng)站策劃、全網(wǎng)營銷推廣、域名注冊、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)