怎么基于vue.js實(shí)現(xiàn)分頁(yè)查詢功能
小編給大家分享一下怎么基于vue.js實(shí)現(xiàn)分頁(yè)查詢功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
專業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來客戶和效益!成都創(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，以用來渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。
具體內(nèi)容如下
最新項(xiàng)目有一個(gè)分頁(yè)功能，畫面風(fēng)格很簡(jiǎn)樸給的樣圖就用【1】表示頁(yè)碼了， 因此，我沒有上網(wǎng)上找插件，自己簡(jiǎn)單的做了一個(gè)。作為菜鳥，代碼可能有點(diǎn)青澀，請(qǐng)見諒。
除了vue我還引用了Bootstrap的類和圖標(biāo)
html
1">
1">
0">...
showup&&i[{{i}}]
...
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;
}這樣通過把選中的頁(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è)查詢功能
轉(zhuǎn)載來源：
http://weahome.cn/article/ihpdog.html
重慶分公司
重慶分公司
