<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>分页</title>

<style>

  *{margin: ;padding: ;}

  #page-break{margin-top: 20px;margin-left: 20px;}

  #page-break li{list-style: none;}

  #page-break a{border: 1px solid #ddd; text-decoration: none;float: left;padding: 6px 12px;color: #337ab7;cursor: pointer}

  #page-break a:hover{background-color: #eee;}

  #page-break a .banclick{cursor: not-allowed;}

  #page-break .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}

  #page-break i{font-style: normal;color: #d44950;margin: 0px 4px;font-size: 12px;}

  #page-break .jumpbox .jumppage {border: 1px solid #ddd; margin-left: 40px; height: 33px; width: 40px; float: left;}

  #page-break .jumpbox .jumpbtn {cursor: pointer; margin-left: 10px;}

  #page-break .jumpbox .jumpbtn:active {color: #337ab7;}

</style>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="page-break">

  <ul>

    <li v-if="cur>1">

      <a v-on:click="cur--,pageClick()">上一页</a>

    </li>

    <li v-if="cur==1">

      <a class="banclick">上一页</a>

    </li>

    <li v-for="item in indexs" v-bind:class="{'active':cur==item}">

      <a v-on:click="btnClick(item), pageClick()">{{item}}</a>

    </li>

    <li v-if="cur!=all">

      <a v-on:click="cur++,pageClick()">下一页</a>

    </li>

    <li v-if="cur==all">

      <a class="banclick">下一页</a>

    </li>

    <li><a>共<i>{{all}}</i>页</a></li>

    <div class="jumpbox">

        <input type="text" class="jumppage" />

        <a class="jumpbtn" v-on:click="pageSkip()">跳转</a>

    </div>

  </ul>

</div>

<script>

    new Vue({

        el: '#page-break',

        data: {

            cur: ,

            all:

        },

        watch: {

            cur: function(newValue, oldValue){

                console.log(arguments);

            }

        },

        methods: {

            btnClick(num){

                if(num!=this.cur){

                    this.cur=num;

                }

            },

            pageClick(){

                console.log('现在是'+this.cur+'页')

            },

            pageSkip(){

                var maxPage = this.all;

                var skipPage = Number(document.getElementsByClassName("jumppage")[].value);

                console.log(typeof skipPage);

                if(!skipPage){

                    alert("请输入跳转页码");

                    return;

                }else if(skipPage< || skipPage>maxPage){

                    alert("您输入的页码超过页数范围了！");

                    return;

                }else{

                    //this.cur=skipPage;

                    this.btnClick(skipPage);

                    this.pageClick();

                }

            }

        },

        computed: {

            indexs(){

                var left = ;

                var right = this.all;

                var arr = [];

                if(this.all>=){

                    if(this.cur> && this.cur<this.all-){

                        left = this.cur-;

                        right = this.cur+;

                    }else if(this.cur<=){

                        left=;

                        right=;

                    }else{

                        left=this.all-;

                        right=this.all;

                    }

                }

                while(left<=right){

                    arr.push(left);

                    left++;

                }

                return arr;

            }

        }

    })

</script>

</body>

</html>

vue day5 分页控件的更多相关文章

  1. vue day5 分页控件 更新 PagedList.mvc 仿

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. vue分页控件

    下载:https://pan.baidu.com/s/1c125Vgc 一个简单的分页控件: 自动加载模式: 手动加载模式: loading图标使用了iconfont: 主要方法: beginRefr ...

  3. 在DevExpress程序中使用Winform分页控件直接录入数据并保存

    一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数 ...

  4. asp.net webform 自定义分页控件

    做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: & ...

  5. asp.net分页控件

    一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Reg ...

  6. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  7. winform快速开发平台 -> 基础组件之分页控件

    一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...

  8. 基于存储过程的MVC开源分页控件--LYB.NET.SPPager

    摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...

  9. AspNetPager分页控件配置

    AspNetPager是asp.net中常用的分页控件,下载AspNetPager.dll,添加引用,在工具栏就可以看到AspNetPager控件: 拖过来之后,设置如下属性: <webdiye ...

随机推荐

  1. C语言的#if #ifdef #ifndef

    #if #ifedf #ifndef   —般情况下,C语言源程序中的每一行代码.都要参加编译.但有时候出于对程序代码优化的考虑.希望只对其中一部分内容进行编译.此时就需要在程序中加上条件,让编译器只 ...

  2. jenkins+svn完整打包并上传到linux服务器上

    因为公司用的是svn版本管理工具并且部署在了windows服务器上,所以测试环使用jenkins需要部署两套环境, 一套是在本地windows服务器,jenkins从svn下载代码完成打包并上传到li ...

  3. Day-01

    昨天学习的内容都是一些简单的入门知识 like:二进制,编程语言这些 我觉得二进制还蛮好玩的 对于ascii码 还好,我不是很陌生 因为学函数的时候,老师有讲到这些 嗯 昨天就这些 继续加油~~~

  4. Handler使用小结

    个人概念里面handler用来更新UI.一直有一个问题困恼我,为什么我在主线程里面创建一个Handler不需要传递传递Looper,而在一个子线程里面必须调用Looper.prepare, Loope ...

  5. change事件同一文件多次选中

    最近在做图片上传的时候,碰到了一点问题,那就是选择内容相同,change事件执行不了 网上搜索了答案,使用off('change')好像也不行 最终找到一种解决办法 使用replaceWith重置in ...

  6. 日积月累--Lock锁机制

    对象监视器 什么是监视器? 监视器可以看做是经过特殊布置的建筑,这个建筑有一个特殊的房间,该房间通常包含一些数据和代码,但是一次只能一个消费者(thread)使用此房间, 当一个消费者(线程)使用了这 ...

  7. linux之正则

    grep命令: -V      打印grep的版本号 -E      解释PATTERN作为扩展正则表达式,也就相当于使用egrep. -F      解释PATTERN作为固定字符串的列表,由换行符 ...

  8. Thymeleaf前后端传值 页面取值与js取值

    参考: Thymeleaf前后端传值 页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式 目的: 后端通过Model传值到前端 ...

  9. jq常用

    1.文本框.密码框.隐藏域.文本域(id换成对应的,value属性存在,才能利用attr(‘value’) 获取值,否则返回undefined): 1.1 获取—>$(“#text”).val( ...

  10. react native原生模块引用本地jar包

    比如module目录结构是这样的: 然后libs中的目录是这样的: 只要在build.gradle中加入这段代码就行了 sourceSets { main { manifest.srcFile 'An ...