怎么基于vue.js實(shí)現(xiàn)分頁(yè)查詢功能

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

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

為什么要使用Vue

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

具體內(nèi)容如下

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

 

除了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, 
//選中的頁(yè)號(hào) 
page : 1, 
//顯示頁(yè)碼下限 
showdown : 0, 
//顯示頁(yè)碼上限 
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(); 
}); 
//選中的頁(yè)號(hào) 
function setpage(i) { 
 listData.page = i; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
//向上翻一頁(yè) 
function up() { 
 if (listData.page > 1) { 
 listData.page = listData.page - 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
} 
//向下翻一頁(yè) 
function down() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.page + 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到首頁(yè) 
function firstpg() { 
 if (listData.page > 1) { 
 listData.page = 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到尾頁(yè) 
function lastpg() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.pages; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//往前翻三頁(yè) 
function showmore1() { 
 listData.showdown -= 3; 
 listData.showup -= 3; 
} 
//往后翻三頁(yè) 
function showmore2() { 
 listData.showdown += 3; 
 listData.showup += 3; 
} 
//設(shè)置顯示的頁(yè)碼下限 
function setShowdown() { 
 listData.showdown = listData.page + 2; 
} 
//設(shè)置顯示的頁(yè)碼上限 
function setShowup() { 
 listData.showup = listData.page - 2; 
}

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

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

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

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

廣告

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