您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“vue.js分頁(yè)中如何實(shí)現(xiàn)單擊頁(yè)碼更換頁(yè)面內(nèi)容”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue.js分頁(yè)中如何實(shí)現(xiàn)單擊頁(yè)碼更換頁(yè)面內(nèi)容”這篇文章吧。
html代碼:
<section class="container page-home"> <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="item in items"> <div class="col-1-2 right"> <img :src="item.coverimage" class="news_image"/> <!-- :要與img標(biāo)簽之間有空格 --> </div> <div class="col-1-2 left"> <a class="art-category left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{item.releasetime.substring(0,19)}}</a> <div class="clear"></div> <div class="art-content"> <h3>{{item.title}}</h3> <div class="info"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{item.author}}</a> </div> <div class="line"></div> <p>{{item.remark}}</p> <a v-bind:href="['/island/stage/newscontent.html?id='+item.id+'&categoryid='+item.categoryid]" rel="external nofollow" class="more">閱讀全文</a> <span href="javascript:;" rel="external nofollow" class="more" >瀏覽量 : {{item.reading}}</span> </div> </div> </article> <!-- 循環(huán)結(jié)束(新聞) --> </div> <div id="pagination" class="clearfix"> <ul> <li v-for="page in pages"> <a class="current" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-if="currentPage == page">{{page}}</a> <!-- 高亮顯示當(dāng)前頁(yè) --> <a class="choose_page" v-if="currentPage != page" @click="clickpage">{{page}}</a> </li> <li v-if="pages > 1"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >next</a></li> </ul> </div> </section>
js:
/查詢相關(guān)新聞種類(lèi)下的所有新聞?dòng)涗? var vm = new Vue({ el: '.page-home', //需要注入的模板的父元素 data: { items : [], pages : [], currentPage : [] }, //end data created:function(){ $.post("/island/stage/queryOneCategoryAllNews.do",{"categoryid":parseInt(categoryid),"currentPage":1},function(data){ vm.pages = data.totalPage; //總頁(yè)碼 vm.items = data.list; //循環(huán)內(nèi)容 vm.currentPage = data.currentPage; //當(dāng)前頁(yè)(添加高亮樣式) }); //end post }, //created methods:{ clickpage:function(event){ var currentPage = $(event.currentTarget).text(); $.post("/island/stage/queryOneCategoryAllNews.do",{"categoryid":parseInt(categoryid),"currentPage":parseInt(currentPage)},function(data){ vm.items = data.list; //循環(huán)內(nèi)容 vm.pages = data.totalPage; //總頁(yè)碼 vm.currentPage = data.currentPage; //當(dāng)前頁(yè)(添加高亮樣式) }); //end post } //end method } }); //end vue
java后臺(tái):
package com.zrq.util; import java.util.List; import org.springframework.stereotype.Component; @Component public class PageUtil { /* * // 默認(rèn)的每頁(yè)記錄數(shù)量(10條) private static final int DEFAULT_PAGE_SIZE = 10; // * 默認(rèn)當(dāng)前頁(yè) private static final int DEFAULT_CURRENT_PAGE = 1; */ // 1.每頁(yè)顯示數(shù)量(everyPage) private int everyPage; // 2.總記錄數(shù)(totalCount) private long totalCount; // 3.總頁(yè)數(shù) private long totalPage; // 4.當(dāng)前頁(yè)(currentPage) private int currentPage; // 5.起始下標(biāo)(beginIndex) private int beginIndex; // 6.判斷是否有上一頁(yè) private boolean next; // 7.判斷是否有下一頁(yè) private boolean previous; // 8.返回列表 private List list; /* 獲取總頁(yè)數(shù) */ public long getTotalPage() { long remainder = totalCount % this.getEveryPage(); // 剩余數(shù) if (remainder == 0) totalPage = totalCount / this.getEveryPage(); else totalPage = totalCount / this.getEveryPage() + 1; return totalPage; } /* 判斷是否有上一頁(yè) */ public void hasPrevious() { if (currentPage > 1) this.setPrevious(true); else this.setPrevious(false); } /* 判斷是否有下一頁(yè) */ public void hasNext() { if (currentPage < this.getTotalCount()) this.setNext(true); else this.setNext(false); } public boolean isNext() { return next; } public boolean isPrevious() { return previous; } public void setTotalPage(long totalPage) { this.totalPage = totalPage; } public void setNext(boolean next) { this.next = next; } public void setPrevious(boolean previous) { this.previous = previous; } public int getEveryPage() { return everyPage; } public long getTotalCount() { return totalCount; } public int getCurrentPage() { return currentPage; } public int getBeginIndex() { return beginIndex; } public List getList() { return list; } public void setEveryPage(int everyPage) { this.everyPage = everyPage; } public void setTotalCount(long totalCount) { this.totalCount = totalCount; } public void setCurrentPage(int currentPage) { this.currentPage = currentPage; } public void setBeginIndex(int beginIndex) { this.beginIndex = beginIndex; } public void setList(List list) { this.list = list; } public PageUtil(int currentPage, int pageSize) { this.currentPage = currentPage; this.everyPage = pageSize; } public PageUtil() { /* * this.currentPage = DEFAULT_CURRENT_PAGE; this.everyPage = * DEFAULT_PAGE_SIZE; */ } public PageUtil(int everyPage, int totalCount, int currentPage, int beginIndex, List list) { super(); this.everyPage = everyPage; this.totalCount = totalCount; this.currentPage = currentPage; this.beginIndex = beginIndex; this.list = list; } }
以上是“vue.js分頁(yè)中如何實(shí)現(xiàn)單擊頁(yè)碼更換頁(yè)面內(nèi)容”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。