Vue 列表下一页 上一页
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 列表下一页 上一页相关推荐
- html内容页上一页下一页,帝国CMS内容页增加内容分页上一页标签功能!
帝国CMS一直以来升级没有提供内容分页的上一页标签功能,只有一个:内容页下一页[!--next.page--] 标签!所以下面就是要改造一下这个标签,实现内容页上一页的功能! 步骤如下: 打开e/cl ...
- 点击切换下一页上一页
一共有20页图片.第一页不能有"上一页"按钮,最后一页不能有"下一页"按钮. 状态:20张图只有第一页显示,其他隐藏. using System.Collect ...
- vue点击按钮返回上一页
返回上一页 html 写法 <span@click="$router.go(-1)"style="width: 100px;height: 50px;line-he ...
- Vue组件keepAlive实现返回上一页保存原数据
在页面中输入搜索条件跳转到详情页,从详情页返回要保留原页面输入的搜索条件及搜索的结果.效果如下: 这里用到了vue的内部组件keepAlive router.js 注:列表页需要缓存 keepAli ...
- java下一页按钮_关于java分页操作,怎么点下一页上一页都没反应?
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 太低级不能上传附件啊,只好粘贴代码下来了,不好意思啊各位大神 mldn public static final String URL = "ab ...
- ajax 点击下一页,AJAX请求帮助下一页/上一页
小编典典 尝试这样的事情-保持一个名为的全局变量,currentPage然后简单地相应地调整页码. 的HTML Current Page: 1 JS var currentPage=1; loadCu ...
- 仿【咪咕动漫】列表下拉刷新上拉加载
一.概述 本篇续 厦门之旅 的第二篇.这期间找工作真的心态几多变化,刚开始兴致高昂,信心满满,面试了几家不错的公司,结果都是因为工资问题不了了之.后面的连面试机会都没有了,每天在狭小的租房里面吃了睡, ...
- 简单分页,无需插件 实现 上一页|下一页 分页功能
分页功能 五花八门,插件的使用也很方便.最近做项目,分页功能是写好的了,利用bootstarp 简单实现的, 类似于这种 但由于数据越来越多,这种循环的方式很不好看.于是想到上一页| 下一页 分页 的 ...
- 翻页 java_jsp实现上一页下一页翻页功能
[导读]前段时间一直忙于期末考试和找实习,好久没写博客了.这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 前段时间一直忙 ...
最新文章
- 使用Newtonsoft.Json
- 客户端与服务器的数据交互
- 【正一专栏】梅西!梅西!梅西!
- 遗传算法(Genetic Algorithm )+C++实现解决TSP问题
- 关于javascript中私有作用域的预解释
- P2P原理及UDP穿透简单说明
- 【docker】第四节:通过docker容器,进行部署fastadmin。
- 使用Linux curl命令获取本机公网IP地址
- Swift - defer关键字(推迟执行)
- 计算机维修工具和仪器,浮球液位计介绍微型计算机常用维修工具和仪器
- 半深入理解CSS3 object-position/object-fit属性
- 【渝粤题库】陕西师范大学800005 人文地理学
- 美国基金教父约翰博格传记(1)
- 网站页面底端“本站已经安全运行XX年XX天XX秒“代码
- 新手怎么通过网络推广引流
- bzoj2037 创世纪
- 云集网上各种解决win10锁屏壁纸不能播放幻灯片的方法
- 微信浏览器唤醒App
- dz3 php post 登录,如何在调用discuz接口中传递登录状态
- 【基础】计算机网络相关的内容