为中华之崛起而读书

<!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. C define详解

    1.简单的define定义 #define MAXTIME 1000 一个简单的MAXTIME就定义好了,它代表1000,如果在程序里面写 if(i<MAXTIME){.........} 编译 ...

  2. LOJ P10011 愤怒的牛 题解

    每日一题 day36 打卡 Analysis 非常水的二分模板,就直接二分答案,用贪心策略check就好了 #include<iostream> #include<cstdio> ...

  3. 【luoguP1414]】又是毕业季II

    题目链接 \(solution\) 暴力求每个数有多少个倍数,从大到小,数\(i\)的倍数有\(f_i\)个,那么选\(1\)~\(f_i\)个同学的答案可以为\(i\),取第一次更新的答案最大 #i ...

  4. 【算法编程 C++ python】单链表反序输出

    题目描述 输入一个链表,从尾到头打印链表每个节点的值.   以下方法仅仅实现了功能,未必最佳.在牛客网测试, C++:3ms 480k Python:23ms 5732k /** * struct L ...

  5. 《JAVA程序设计》_第十周学习总结

    一.学习内容 12.1进程与进程 程序是一段静态的代码,进程是程序的一次动态执行过程,这个过程也是进程本身从产生.发展至消亡的过程. 线程不是进程,是比进程更小的执行单位.但与进程不同的是,线程的中断 ...

  6. 导入eclipse有Unbound classpath variable: 'M2_REPO报错的解决方法

    Eclipse maven of the project reported in Unbound classpath variable: 'M2_REPO /**/***/***. jar' But ...

  7. Java文件上传下载原理

    文件上传下载原理 在TCP/IP中,最早出现的文件上传机制是FTP.它是将文件由客户端发送到服务器的标准机制. 但是在jsp编程中不能使用FTP方法来上传文件,这是由jsp运行机制所决定的 文件上传原 ...

  8. java单元测试之如何实现异步接口的测试案例

    测试是软件发布的重要环节,单元测试在实际开发中是一种常用的测试方法,java单元测试主要用junit,最新是junit5,本人开发一般用junit4.因为单元测试能够在软件模块组合之前尽快发现问题,所 ...

  9. Ubuntu18.04 Server安装Nginx+Git服务和独立的svn服务

    安装Nginx+Git 需要安装的包有 nginx, fcgiwrap, git. 其中git在Ubuntu18.04 Server安装时已经默认安装了. 需要安装的是前两个 而fcgiwrap是在 ...

  10. ListView中嵌入布局的Button或多个点击事件

    有时候在ListView嵌入的布局中有多个事件需要点击,比如一个item中有TextView和Button两个布局,当我们需要获取这两个点击事件时,我们应该如何去获取呢,通常来说,我们都是已经固定好了 ...