vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
程序员文章站
2022-04-22 20:43:39
html代码:
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标签之间有空格 --> </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"> <h2>{{item.title}}</h2> <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" style="margin-left:50px;">浏览量 : {{item.reading}}</span> </div> </div> </article> <!-- 循环结束(新闻) --> </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> <!-- 高亮显示当前页 --> <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:
/查询相关新闻种类下的所有新闻记录 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后台:
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; } }
以上这篇vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: 笑的都很开心
下一篇: javascript中的隐式调用