vue.js展示pagehelper数据并修改
时间:2019-10-17
本文章向大家介绍vue.js展示pagehelper数据并修改,主要包括vue.js展示pagehelper数据并修改使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vue.js遍历数据,并向下加载更多。
<template v-for="ms,pidx in messages"> <div class="m,idx in ms"> <div class="date-span"> <span>{{m.a }}</span><span>{{m.b }}</span></div> <div class="jpkcD1"> <div style="margin-bottom: 10px;"> <span @click="updateC(pidx,idx,m.id,m.c)">{{m.c }}</span> <!-- 点击修改c的值 --> </div> </div> </div> </template> <div class="nono" id="" style="margin-bottom:10px;"> <span v-if="show">暂无更多</span> <span v-else @click="getData()">查看更多</span> </div> <script> new Vue({ el: '#app01', data: { messages:[], //定义空数组, page:{"pageNum":0}, //定义初始page对象 show:true }, mounted:function(){ //加载页面时直接执行getDate()获取第1页数据 this.getData(); }, methods:{ getData(){ var self = this //这里先将vue实例的this赋值,ajax方法中的this为windows的。 axios.get("getOrderMessage",{ params: { pageNum:self.page.pageNum+1, //每次获取下一页,当前页码+1 pageSize:5 } }).then(function(response) { self.messages.push(response.data.page.list); self.page = response.data.page; if (self.page.pages != self.page.pageNum){ //判断总页数是否为当前页 self.show = false; }else{ self.show = true; } }) }, updateC(pidx,idx,id,m.c){ var c = "new.c"; this.messages[pidx][idx].c = c; //修改页面遍历后的c的值 axios.post("updateC",{ //ajax修改数据库中c的值 params: { id:id, c:c } }).then(function(response) { // }) } } }) </script>
原文地址:https://www.cnblogs.com/zd1009/p/11694902.html
- CaseStudy(showcase)界面篇-desing设计界面
- [Silverlight动画]转向行为 - 寻找行为
- 【数字货币】数字黄金
- [Silverlight动画]转向行为 - 转向机车
- [Silverlight动画]转向行为 - 机车
- 微信、小游戏与未来
- [Silverlight动画]转向行为 - 2D向量
- [Silverlight动画]转向行为 - 介绍
- WCF技术剖析之十七:消息(Message)详解(中篇)
- flash游戏引擎整理
- [Silverlight动画]转向行为 - 群落
- [Silverlight动画]转向行为 - 路径跟随
- [Silverlight动画]转向行为 - 漫游行为
- [Silverlight动画]转向行为 - 对象回避
- 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 数组属性和方法
- 【Flutter 专题】96 图解 Draggable + DragTarget 基本拖拽效果
- Spring 基于注解(annotation)的配置之@Autowired注解
- 人心易变,这段有趣的C代码也一样!!!
- matplotlib绘制常见统计图形(一)
- python与安全(二)格式化字符串和Flask session
- ROS2机器人笔记20-07-24
- Postgresql 渗透利用总结
- Spring 基于注解(annotation)的配置之@Required注解
- 由一个系统激活工具引起的一次简单测试
- Golang channel 快速入门
- 潘石屹用Python解决100个问题 | 素数
- Spring 自动装配模式之构造函数装配方式
- 安全狗 {safedog} 最新版注入bypass
- C语言定时关机小程序
- 深入k8s:Pod对象中重要概念及用法