<!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. jmeter的几种参数化方式

    在用到jmeter工具时,无论做接口测试还是性能测试,参数化都是一个必须掌握且非常有用的知识点.参数化的使用场景,例如: 1)多个请求都是同一个ip地址,若服务器地址更换了,则脚本需要更改每个请求的i ...

  2. pgmpy安装

    1.anaconda安装,可能在cmd中输入conda会报错,是因为在安装的时候没有配置好环境变量,在安装的时候有一个框框没选(当时是not recommand), 解决办法:需要在系统环境变量中添加 ...

  3. 常见的操作系统及linux发展史

    目前我们常见的操作系统有: 1> 桌面操作系统 Windows 系列 用户群体大 macOS 适合于开发人员 Linux 应用软件少 2> 服务器操作系统 Linux 安全.稳定.免费 占 ...

  4. socket.io 实现简易聊天

    客户端: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. python基础14_文件操作

    文件操作,通常是打开,读,写,追加等.主要涉及 编码 的问题. #!/usr/bin/env python # coding:utf-8 ## open实际上是从OS请求,得到文件句柄 f = ope ...

  6. 模拟post/get请求 类似于google的postman

    下载地址:https://www.getpostman.com/apps

  7. Mysql基础教程之mysql 设置参数常用方法

    1)设置mysql的全局方法,设置完立刻重启mysqlvim /etc/my.cnf[mysqld]interactive_timeout=1800wait_timeout=1800 全局永久生效现在 ...

  8. 使用restTemplate来访问https

    1.maven: <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId& ...

  9. 二叉树：B+tree等

    二叉树:(树是一种可以递归定义数据结构) 度:节点的个数 深度:层数(即从根点到叶子节点的层数) 满二叉树:指底层叶子节点左右均存在的二叉树. 完全二叉树:指底层叶子节点的右侧均存在的二叉树. 一般二 ...

  10. wpf 依赖属性介绍

    微软在wpf中推出le 附加属性 这个新概念 简单来说,本来自己这个类是不具备该行为,但是在特殊情况下需要用到该属性 比如在 TextBox 本来是不具备,几行几列 跨行等 行为 ,但是如果  把他放 ...