当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

2018年02月16日  | 移动技术网IT编程  | 我要评论

燕歌行,就医网,儿童毛衣编织视频

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)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网