Implementieren Sie Paging in vue.js, indem Sie auf die Seitenzahl klicken, um den Seiteninhalt zu ersetzen

Im Folgenden werde ich Ihnen eine Methode zum Klicken auf die Seitenzahl vorstellen, um den Seiteninhalt in vue.js Paging zu ändern (mit Spring SpringMVC). Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

HTML-Code:

<section class="container page-home">
<p id="main-content" class="wrap-container zerogrid">
<article id="news_content" v-for="item in items">
<p class="col-1-2 right">
<img  class="news_image lazy"  src="/static/imghwm/default1.png"  data-src="item.coverimage"  : / alt="Implementieren Sie Paging in vue.js, indem Sie auf die Seitenzahl klicken, um den Seiteninhalt zu ersetzen" >
<!-- :要与img标签之间有空格 -->
</p>
<p 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>
<p class="clear"></p>
<p class="art-content">
<h2 id="item-title">{{item.title}}</h2>
<p class="info">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{item.author}}</a>
</p>
<p class="line"></p>
<p>{{item.remark}}</p>
<a v-bind:href="[&#39;/island/stage/newscontent.html?id=&#39;+item.id+&#39;&categoryid=&#39;+item.categoryid]" rel="external nofollow" class="more">阅读全文</a>
<span href="javascript:;" rel="external nofollow" class="more" style="margin-left:50px;">浏览量 : {{item.reading}}</span>
</p>
</p>
</article>
<!-- 循环结束(新闻) -->
</p>

<p 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>
<!-- 高亮显示当前页 -->
<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>
</p>

</section>

js:

/查询相关新闻种类下的所有新闻记录
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;
//总页码
 vm.items = data.list;
//循环内容
 vm.currentPage = data.currentPage;
//当前页(添加高亮样式)
 });
//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;
//循环内容
 vm.pages = data.totalPage;
//总页码
 vm.currentPage = data.currentPage;
//当前页(添加高亮样式)
}); //end post
 } //end method
 }
 }); //end vue

Java-Backend:

package com.zrq.util;

import java.util.List;

import org.springframework.stereotype.Component;

@Component
public class PageUtil {
/*
* // 默认的每页记录数量(10条) private static final int DEFAULT_PAGE_SIZE = 10; //
* 默认当前页 private static final int DEFAULT_CURRENT_PAGE = 1;
*/
// 1.每页显示数量(everyPage)
private int everyPage;
// 2.总记录数(totalCount)
private long totalCount;
// 3.总页数
private long totalPage;
// 4.当前页(currentPage)
private int currentPage;
// 5.起始下标(beginIndex)
private int beginIndex;
// 6.判断是否有上一页
private boolean next;
// 7.判断是否有下一页
private boolean previous;
// 8.返回列表
private List list;

/* 获取总页数 */
public long getTotalPage() {
long remainder = totalCount % this.getEveryPage(); // 剩余数
if (remainder == 0)
totalPage = totalCount / this.getEveryPage();
else
totalPage = totalCount / this.getEveryPage() + 1;
return totalPage;
}

/* 判断是否有上一页 */
public void hasPrevious() {
if (currentPage > 1)
this.setPrevious(true);
else
this.setPrevious(false);
}

/* 判断是否有下一页 */
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;
}

}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von Elememt-UI zum Erstellen eines Management-Backends in Vue (ausführliches Tutorial)

Über WebView in React-Native Behandeln Sie die Rückgabemethode ohne Rückruf

Methode zum Lesen von Daten über die JSON-Datei in Vue2.5

Das obige ist der detaillierte Inhalt vonImplementieren Sie Paging in vue.js, indem Sie auf die Seitenzahl klicken, um den Seiteninhalt zu ersetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!