Vue 列表点击下一页 上一页 示例代码

export default {data() {return {//获取来的数据储存pageData:'',// 总页数pageCount:'',// 当前页码pageNum:'',//当前是第一页selectPage:1}},created(){this.query();},methods:{//上一页mstop(){this.selectPage = this.selectPage - 1if(this.selectPage<=1){this.selectPage =1alert("当前已是第一页")}else{this.query(this.selectPage)}},//下一页msbottom(){this.selectPage = this.selectPage + 1if(this.selectPage >= this.pageCount){alert("当前最后一页")}else{this.query(this.selectPage)}},query(num){let that = this;let historyPagevo={};//需要获取的数据条数historyPagevo['pageSize'] = 13// 需要传的参数historyPagevo["entyVo"]={"zylmiputIdval":""};historyPagevo["selectPage"]=num;this.$axios({method:'请求方式(POST或GET)',url:'接口地址',headers: { "Content-Type": "application/json;charset=utf-8" }, //即将被发送的自定义请求头withCredentials: true ,//即将被发送的自定义请求头data:historyPagevo}).then(res => {//清空上一次的数据this.pageData = []// 获取数据this.pageData = res.data[0].pageList//在第一次进入页面的是加载当前第一页的数据this.itemId(this.pageData[0].STORYCONTEXT)// 获取所有的数据的总页数this.pageCount=res.data[0].pageCountconsole.log( res.data[0]);}).catch(error => {// console.log(res.data)//请求失败返回的数据});}},
因为我后台给我传的数据方式不一定所义我在获取数据的时候this.pageData = res.data[0].pageList,在Data后面加了【0】,可以再获取前看下控制台打印出来的数据

Vue 列表下一页 上一页相关推荐

  1. html内容页上一页下一页,帝国CMS内容页增加内容分页上一页标签功能!

    帝国CMS一直以来升级没有提供内容分页的上一页标签功能,只有一个:内容页下一页[!--next.page--] 标签!所以下面就是要改造一下这个标签,实现内容页上一页的功能! 步骤如下: 打开e/cl ...

  2. 点击切换下一页上一页

    一共有20页图片.第一页不能有"上一页"按钮,最后一页不能有"下一页"按钮. 状态:20张图只有第一页显示,其他隐藏. using System.Collect ...

  3. vue点击按钮返回上一页

    返回上一页 html 写法 <span@click="$router.go(-1)"style="width: 100px;height: 50px;line-he ...

  4. Vue组件keepAlive实现返回上一页保存原数据

    在页面中输入搜索条件跳转到详情页,从详情页返回要保留原页面输入的搜索条件及搜索的结果.效果如下: 这里用到了vue的内部组件keepAlive router.js 注:列表页需要缓存  keepAli ...

  5. java下一页按钮_关于java分页操作,怎么点下一页上一页都没反应?

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 太低级不能上传附件啊,只好粘贴代码下来了,不好意思啊各位大神 mldn public static final String URL = "ab ...

  6. ajax 点击下一页,AJAX请求帮助下一页/上一页

    小编典典 尝试这样的事情-保持一个名为的全局变量,currentPage然后简单地相应地调整页码. 的HTML Current Page: 1 JS var currentPage=1; loadCu ...

  7. 仿【咪咕动漫】列表下拉刷新上拉加载

    一.概述 本篇续 厦门之旅 的第二篇.这期间找工作真的心态几多变化,刚开始兴致高昂,信心满满,面试了几家不错的公司,结果都是因为工资问题不了了之.后面的连面试机会都没有了,每天在狭小的租房里面吃了睡, ...

  8. 简单分页,无需插件 实现 上一页|下一页 分页功能

    分页功能 五花八门,插件的使用也很方便.最近做项目,分页功能是写好的了,利用bootstarp 简单实现的, 类似于这种 但由于数据越来越多,这种循环的方式很不好看.于是想到上一页| 下一页 分页 的 ...

  9. 翻页 java_jsp实现上一页下一页翻页功能

    [导读]前段时间一直忙于期末考试和找实习,好久没写博客了.这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 前段时间一直忙 ...

最新文章

  1. 使用Newtonsoft.Json
  2. 客户端与服务器的数据交互
  3. 【正一专栏】梅西!梅西!梅西!
  4. 遗传算法(Genetic Algorithm )+C++实现解决TSP问题
  5. 关于javascript中私有作用域的预解释
  6. P2P原理及UDP穿透简单说明
  7. 【docker】第四节:通过docker容器,进行部署fastadmin。
  8. 使用Linux curl命令获取本机公网IP地址
  9. Swift - defer关键字(推迟执行)
  10. 计算机维修工具和仪器,浮球液位计介绍微型计算机常用维修工具和仪器
  11. 半深入理解CSS3 object-position/object-fit属性
  12. 【渝粤题库】陕西师范大学800005 人文地理学
  13. 美国基金教父约翰博格传记(1)
  14. 网站页面底端“本站已经安全运行XX年XX天XX秒“代码
  15. 新手怎么通过网络推广引流
  16. bzoj2037 创世纪
  17. 云集网上各种解决win10锁屏壁纸不能播放幻灯片的方法
  18. 微信浏览器唤醒App
  19. dz3 php post 登录,如何在调用discuz接口中传递登录状态
  20. 【基础】计算机网络相关的内容

热门文章

  1. 项目实施进度的挣值分析
  2. 火影忍者忍者先锋维修服务器,火影忍者博人传:忍者先锋配置要求介绍
  3. Latex-- CTEX 中 标准字体命令与字号的对应
  4. 贪心算法之柠檬水java
  5. Ubuntu14.04下asymptote使用中文标签设置
  6. 博奥智源,浅谈档案资料目录管理软件开发架构
  7. 使用SourceInsight4.0看代码常用操作及快捷键
  8. 【为什么要用真机】——谈模拟器与真机的差别
  9. 基于51单片机数控可调恒流源设计(实物图+原理图+PCB+论文)
  10. 智乃的数字积木(easy version)<每日一题>