vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
时间:2019-04-13
本文章向大家介绍vue.js分页中单击页码更换页面内容的方法(配合spring springmvc),主要包括vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android Notes|BottomNavigationView 爱上 Lottie
- Android Notes|玩转 ShapeableImageView
- 前端技术 Webpack(学习 Webpack 的原因,Webpack 快速入门)
- 每日一问第1期 | 截取字符串
- 动态规划此一篇就够了 万字总结
- 每日一问第2期 | final, finally, finalize 的区别?
- 当return遇到try、catch、finally时会发生什么?
- 五分钟C语言数据结构 之 二叉树层次遍历
- 为何IntelliJ IDEA比Eclipse好在哪里?
- 五分钟C语言数据结构 之 二叉树中序遍历
- Django 安全之跨站点请求伪造(CSRF)保护
- 五分钟C语言数据结构 之 二叉树先序遍历
- Java 语言基础(常用设计原则和设计模式,常用 Java 8~11 新特性)
- 五分钟C语言数据结构 之 二叉树后序遍历(非递归很重要)
- 5分钟Flink - 自定义Source源