为中华之崛起而读书

<!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实现列表分页和按钮操作的更多相关文章

  1. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  2. django rest_framework vue 实现用户列表分页

    django rest_framework vue 实现用户列表分页 后端 配置urls # 导入view from api.appview.userListView import userListV ...

  3. vue+element-ui 实现分页(根据el-table内容变换的分页)

    官方例子 官方提示: 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示.prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,si ...

  4. 为什么你需要在用 Vue 渲染列表数据时指定 key

    本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...

  5. 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...

  6. 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 ...

  7. JS-001-单选复选按钮操作

    此文主要针对 web 页面中常见元素(例如:单选按钮.复选按钮)的 JavaScript 操作,进行简单的源码示例演示,敬请小主们参阅.若有不足之处,敬请大神指正,不胜感激! 话不多言了,直接上码: ...

  8. jsp 条件查询、列表分页

    条件查询 dao //根据搜索条件筛选数据 public List<User> GetUserBySearch(String userName, String sex) throws SQ ...

  9. 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)

    业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...

随机推荐

  1. hdu6172&&hdu6185&&P5487——BM算法

    hdu6172 模板的简单应用 先根据题中的表达式求出前几项,再上BM,注意一下n的大小关系. #include <bits/stdc++.h> using namespace std; ...

  2. mssql 清理死锁

    -存储过程 我们可以使用以下存储过程来检测,就可以查出引起死锁的进程和SQL语句.SQL Server自带的系统存储过程sp_who和sp_lock也可以用来查找阻塞和死锁, 但没有这里介绍的方法好用 ...

  3. 使用vault pki engine 方便的管理证书

    vault 是一个很方便的secret .敏感数据管理工具,当前的版本已经包含了UI,使用起来很方便 以下演示一个简单的pki 管理 项目使用docker-compose 运行,为了简单使用单机开发模 ...

  4. 3-微信小程序开发(小程序的目录结构说明)

    https://www.cnblogs.com/yangfengwu/p/10050784.html 源码下载链接: 或者 这节先说一下小程序的目录结构 自行根据  https://www.cnblo ...

  5. 17-ESP8266 SDK开发基础入门篇--TCP服务器 RTOS版,小试牛刀

    https://www.cnblogs.com/yangfengwu/p/11105466.html 现在开始写... lwip即可以用socket 的API  也可以用 netconn  的API实 ...

  6. 洛谷 题解 UVA572 【油田 Oil Deposits】

    这是我在洛谷上的第一篇题解!!!!!!!! 这个其实很简单的 我是一只卡在了结束条件这里所以一直听取WA声一片,详细解释代码里见 #include<iostream> #include&l ...

  7. 金字塔原理(Pyramid Principle)

    什么是金字塔原理?简单来说,金字塔原理就是“中心论点---分论点---支撑论据”这样的一个结构. 图片摘自:http://www.woshipm.com/pmd/306704.html 人类通常习惯于 ...

  8. Hadoop(四)—— MapReduce

    一.Hadoop版本特性 MRv1 第一代计算框架,由编程模型和运行时环境两部分组成. 编程模型是,将数据进行map操作,然后进行reduce操作,最后将计算结果存储到HDFS中. 运行时环境是,由J ...

  9. 剑指offer:字符流中第一个不重复的字符

    题目描述: 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字符流中读 ...

  10. 剑指offer:平衡二叉树

    题目描述: 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 思路分析: 首先要明确平衡二叉树的定义.平衡二叉是左右子树的高度差小于等于1,且左右子树都为平衡二叉树.这里就存在一个递归判断左右子树是否为 ...