<!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. 漫谈hashcode

    概要 对于hashcode,相信很多朋友都不陌生,应为我们很多时候都需要用到这个,比如hashMap中就用到了,根据key的hash值来决定value存放的位置,之后来取得时候直接到指定的位置上那就行 ...

  2. redis应用-分布式锁

    一个操作要修改用户的状态,修改状态需要先读出用户的状态,在内存里进行修改,改完了再存回去.如果这样的操作同时进行了,就会出现并发问题,因为读取和保存状态这两个操作不是原子的. set lock:cod ...

  3. 常用的settings.xml文件

    <?xml version="1.0"?> <settings> <localRepository>/Users/bernie.cx/.m2/r ...

  4. 2017-10-22模拟赛T2 或(or.*)

    题面 [题目描述]你需要构造一个长度为 n 的数列 X,当中的数字范围从 0 到 2^30-1.除此之外你需要满足 m 个条件,第 i 个条件为 X[li]|X[li+1]|……|X[ri]=pi.| ...

  5. Springboot读取本地图片并显示

    在application.yml中配置url访问路径和本地图片路径: 方框1:url中访问路径,这里为:localhost:8080/testspringboot/image/... 方框2:本地图片 ...

  6. 低成本制作基于OpenWRT的渗透工具

    不知道你听说过Hak5的产品没有,它们可是黑客以及渗透测试人员的最爱.其中,有很多的PoC黑客工具都曾在热门美剧<黑客军团>中出现过.Hak5的 PACKETSQUIRREL 上架已经有好 ...

  7. Javascript学习---倒计时

    function fn() { var now = new Date(); // 此时此刻的时间 var old = new Date(2018, 9, 30); // 2018,6,25 var t ...

  8. CSS:与input相关的一些样式设置问题

    input是HTML中非常重要,非常常用而又不可替代的元素,在于其相关的样式设置中有时会遇到其他元素不会发生的问题,今天把我印象中的一些小问题和解决方案记录一下. 1.与同行元素上下居中对齐 关于上下 ...

  9. 从输入URL按下回车到页面展现，中间发生了什么？

    从输入URL按下回车到页面展现,总的来说发生了一下几个过程: DNS 解析:将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器 ...

  10. 电脑小知识-win10

    设置开机自启 一直想设置几个软件开机自启,尤其是文件搜索类和截图软件,不然每次打开电脑都要双击好几个工具,下面就记录一下如何设置开机自启. 1.先打开咱们的任务管理器,看看都有什么是开机自启的: 可以 ...