<!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. django的ORM

    在项目根目录下运行 python manage.py shell 即可进入django的交互shell界面 查询 from my_app.models import MyTestModel datas ...

  2. HDFS（一） 高级特性

    三个高级特性——快照.配额.回收站 一.快照(snapshot):是一种备份,默认关闭 1.应用场景: 防止用户错误操作 备份 试验/测试 灾难恢复 2.命令: 管理命令: -allowsnapsho ...

  3. rtp传输音视频(纯c代码)

    参考链接: 1. PES,TS,PS,RTP等流的打包格式解析之RTP流 https://blog.csdn.net/appledurian/article/details/73135343   2. ...

  4. Frist one

    2017.11.27 10:20am 今天也许只是普通的一个周一上午 但是我希望在多年以后 在我回望这些年的努力学习中 今天会是最浓墨重彩的一笔 我时常感到焦虑 对未来的焦虑 对感情的焦虑 以至于 我 ...

  5. [2003_p1]乒乓球

    一道因为输出不一样疯狂超时的题目(是我太菜,但是我jio得代码是ok的) 题目描述 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制改革引起了很大的 ...

  6. Java中常见的分页算法

    在查询数据的时候或者展示数据的时候经常会使用分页,介绍几种简单的分页算法: //总的页数 int total = 30: //每页个数 int pageSize = 6; 1.one     int ...

  7. 微信小程序 画布drawImage实现图片截取

    大多数图片都大小不一,选择框的尺寸也是宽高相等的,就会有图片被压缩 解决方法: 1.可以使用画布对图片先进行截取,保存截取图片(用户自己选取,或者指定图片中心区域截取),但是对于多张图片手动截取,会影 ...

  8. day03 int bool str

    1. 昨日内容回顾 1. while循环 语法: while 条件: 循环体 else: 语句块 执行过程:判断条件是否为真. 如果真, 执行循环体.然后再次判断条件... 直到条件为假循环停止 br ...

  9. 精进之路之HashMap

    HashMap本质的核心就是“数组+链表”,数组对于访问速度很快,而链表的优势在于插入速度快,HashMap集二者于一身. 提到HashMap,我们不得不提各个版本对于HashMap的不同.本文中先从 ...

  10. Csrf_token ||| CSRF跨站请求伪造

    # 注: 部分内容参考网上,侵删   CSRF(Cross-site request forgery) 跨站请求伪造,是一种对网站的恶意利用  它会通过伪装成受信任用户的请求来利用受信任的网站来获取一 ...