用vue实现列表分页和按钮操作
为中华之崛起而读书
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
</head> <body>
<div id="t">
<table>
<tr>
<td>id</td>
<td>name</td>
<td>操作</td> </tr>
<tr v-for="k in list">
<td>{{k.uid}}</td>
<td>{{k.uname}}</td> <td>{{k.status}}</td> <td> <input type="button" @click="a()" v-if="k.status==0" value="保存"/>
<input type="button" v-on:click="b()" v-if="k.status==1" value="舍弃"/>
</td> </tr> </table>
<span v-if="this.current>1">
<input type="button" v-on:click="fnone()" v-if="true" value="首页"/> </span>
<span v-if="this.current-1>=1">
<input type="button" v-on:click="fnprev()" v-if="true" value="上一页"/> </span>
<span v-if="this.current+1<=total"> <input type="button" v-on:click="fnnext()" v-if="true" value="下一页"/>
</span>
<span v-if="this.current!=total"> <input type="button" v-on:click="fnlast()" v-if="true" value="尾页"/>
</span> </div> </body>
<script>
var nv=new Vue({
el:"#t",
data:{ list:[],
current:1,
total:1 }, methods:{
fnnext:function(){
if(this.current+1<=this.total){
this.current=this.current+1;
this.fnboss();
} },
fnprev:function(){ if(this.current-1>=1){
this.current=this.current-1;
this.fnboss();
} },
fnone:function(){
this.current=1;
this.fnboss(); },
fnlast:function(){
this.current=this.total;
this.fnboss(); }, fnboss:function(){
axios.get(`http://localhost:8080/list/${this.current}`).then(obj=>{
console.log(obj);
this.list=obj.data.data.content;
this.total=obj.data.data.totalPages; }) } },
created:function(){
this.fnboss();
} }) </script>
</html>
用vue实现列表分页和按钮操作的更多相关文章
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- django rest_framework vue 实现用户列表分页
django rest_framework vue 实现用户列表分页 后端 配置urls # 导入view from api.appview.userListView import userListV ...
- vue+element-ui 实现分页（根据el-table内容变换的分页）
官方例子 官方提示: 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示.prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,si ...
- 为什么你需要在用 Vue 渲染列表数据时指定 key
本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...
- 基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用
在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
- JS-001-单选复选按钮操作
此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...
- jsp 条件查询、列表分页
条件查询 dao //根据搜索条件筛选数据 public List<User> GetUserBySearch(String userName, String sex) throws SQ ...
- 微信小程序开发——列表分页上拉加载封装实现（订单列表为例，订单状态改变后刷新列表滚动位置不变）
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...
随机推荐
- 11-Flutter移动电商实战-首页_屏幕适配方案和制作
1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...
- etcd增删改查
是一种特殊的 \(n\) 位二进制串排列法,它要求相邻的两个二进制串间恰好有一位不同,特别地,第一个串与最后一个串也算作相邻. ...
- 干货 | 10分钟搞懂branch and bound（分支定界）算法的代码实现附带java代码
Outline 前言 Example-1 Example-2 运行说明 00 前言 前面一篇文章我们讲了branch and bound算法的相关概念.可能大家对精确算法实现的印象大概只有一个,调用求 ...
- html5获取用户当前位置
支持地理定位的浏览器有IE9+.Firefox 3.5+ .Opera 10.6+ .Safari 5+ .Chrome.iOS 版Safari.Android版WebKit. navigator.g ...
- FormData实现文件上传
我用到FormData传输的使用场景:vant UI组件里面 的图片上传这块,需要调用后台的图片上传接口,使用的是FormData方式上传的 https://www.cnblogs.com/hutuz ...
- Edusoho之X-Auth-Token
昨天这篇文章Edusoho之Basic Authentication提到了X-Auth-Token.今天我主要讲的是Edusoho之X-Auth-Token的请求API方式. 至于为什么建议不要用HT ...
- 集成了SSM框架的系统怎么做测试？
1.首先在测试文件夹下新建一个测试基类BaseTest BaseTest中的代码如下: package wbl_ssm_blog.mapper; import org.junit.Test; impo ...
- 第07组 Beta冲刺（1/5）
队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:代码编辑器 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助教小姐姐) ...