<!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. 关于Ubuntu使用笔记

    Ubuntu vm tools 安装 sudo apt install open-vm-tools-desktop 在安装程序时Ubuntu会将安装目录锁定,安装结束后会解除锁定,中断安装后无法再安装 ...

  2. Vue学习Day002

    内联处理器的操作 除了直接绑定到一个方法,也可以在内联JavaScript语句中调用方法 <div id="example-3"> <button v-on:cl ...

  3. 远程连接SqlServer 数据库时提示 "在与SQL Server 建立连接时出现与网络相关的或特定实例的错误" 解决方法

    前言 由于在之前的职业生涯中, 无论是数据库还是开发环境, 都是前人弄好的,自己只管使用就好啦.并不知安装过程中会出现各种各样的错.最近接触服务器之后,开发环境以及配置各方面都是从头到脚开始安装到配置 ...

  4. 安装SQl Server 报错 "需要 Microsoft.NET Framework 3.5 ServicePack 1" 解决方法

    前言 之前装Sql Server都没遇到过这样的问题, 昨天重装了系统之后, 然后安装SQl Server 报错,提示 "需要 Microsoft.NET Framework 3.5 Ser ...

  5. 有时候union或者union all比左连接查询速度快

    原来的语句 select count(1) from  ( SELECT CustCode,ShopCode,CreateTime,UniqCode,SaleType,TotalMoney,Exami ...

  6. Linux磁盘故障案例

    原因:由于另外一块磁盘不存在,但是配置文件/etc/fstab中又有挂载的配置,挂载出问题就导致这样的故障. 输入root密码进去 编辑/etc/fstab文件把箭头指向的这一行注释掉或者删除掉.然后 ...

  7. 字典序UVa 1584 Circular Sequence

    #include <iostream> #include <algorithm> #include <cmath> #include <cstdio> ...

  8. Mantis：Mantis rest api url 404 Not Found.解决过程纪录

    测试Mantis rest api时碰到的问题:404 Not Found. 根据文件,Mantis rest api的预设url是{{url}}/api/rest/{{controller}}. 其 ...

  9. python复习购物车程序

    个人学习总结: 无他,唯手熟尔!多敲多练才是王道 python 第三课 元组的灵活运用&字符串的诸多操作 Program01 '''时间 2018年2月12日12:15:28目的 购物车程序 ...

  10. 为什么毕业一年了工资还是只有7K

    “天将降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,曾益其所不能.”. 从实习的时候开始说起吧,实习的时候是在上海的一家做winform的公司,这家公司总是会 ...