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


Posted in Javascript onFebruary 10, 2018

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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
九种原生js动画效果
Nov 11 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
hammer.js实现图片手势放大效果
Aug 29 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
小程序开发基础之view视图容器
Aug 21 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
React Fragment介绍与使用详解
Nov 11 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 #Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 #Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 #Javascript
Vue组件和Route的生命周期实例详解
Feb 10 #Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 #Javascript
vue.js 微信支付前端代码分享
Feb 10 #Javascript
详解如何实现一个简单的 vuex
Feb 10 #Javascript
You might like
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python获取邮件地址的方法
2015/07/10 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python占用的内存优化教程
2019/07/28 Python
python实现邮件自动发送
2019/08/10 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
单位单身证明范本
2014/01/11 职场文书
先进集体事迹材料
2014/02/17 职场文书
毕业论文致谢词
2015/05/14 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL