基于jQuery的分页插件很多，今天分享一下基于Vue的分页插件pagination.js，该插件使用用感觉很不错，简单不复杂，现将个人使用过程中的方法与遇到的问题以及实例分享出来。

下载解压的主要目录是：

Vue_Pagination_demo.html可以直接打开查看UI

Vue_Pagination的使用

1.首先分析插件需要的组件

vue.js 、zpageNav.css、zpageNav.js

2.在页面中导入相应的文件

3.组件上属性配置

此时注意  若因为数据返回的key需要自行修改插件，标签上属性的绑定名要按照图中  不能识别驼峰，小写字母加‘-’，不然会报错

如图是我因为这边返回的key而做的改动，可能大家都知道，只是做一个提醒

4.编写js，vue的方法

上图以及案例中都已经有注释，在此贴出我实际使用案例，为方便理解，用了JQ的ajax

5.当然也可以用vue-resource

6.UI展示

点击下载 百度网盘   链接:https://pan.baidu.com/s/1X3XeLabWLP0frpKn_KUs_g  密码:geey

基于VUE2.0的分页插件（很好用，很简单）的更多相关文章

  1. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  2. 一款基于vue2.0的分页组件---写在页面内

    通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 .p ...

  3. vue2.0实现分页组件

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...

  4. vue-swiper 基于Vue2.0开发 轻量、高性能轮播插件

    vue-swiper 基于 Vue2.0 开发,基本满足大部分功能 轻量.高性能轮播插件.目前支持 无缝衔接自动轮播.无限轮播.手势轮播 没有引入第三方库,原生 js 封装,打包之后只有 8.2KB ...

  5. 源码来袭！！！基于jquery的ajax分页插件（demo+源码）

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  6. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  7. 基于vue2.0的一个豆瓣电影App

    1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...

  8. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  9. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

随机推荐

  1. 正则表达式及R字符串处理之终结版

    http://yphuang.github.io/blog/2016/03/15/regular-expression-and-strings-processing-in-R/ 0.动机:为什么学习字 ...

  2. [ios]NSThread传值 NSValue传值

    NSThread:http://www.cocoachina.com/bbs/read.php?tid=51873 NSValue:http://blog.sina.com.cn/s/blog_bf9 ...

  3. 关于C和C++

    最开始学的就是C和C++,但只是学过,根本就不知道怎么使用. 后来接触了Python和Perl才知道怎么将编程应用于实际需求当中,读取文件,存放到数据结构,处理,输出. 但脚本语言有其固有的缺点,不能 ...

  4. 免费下载知网文献的方法 | sci-hub免费下载SCI论文方法

    部分方法参考自在家里如何免费使用中国知网? - 大学生 - 知乎的回答,已注明出处. 知网文献下载:idata中国知网 idata中国知网网址:idata中国知网 https://www.cn-ki. ...

  5. linux下修改mysql登录密码

    一.修改mysql密码 1.停止服务      /etc/init.d/mysqld stop   2.以不检查权限的方式启动     /etc/init.d/mysqld --skip-grant- ...

  6. [洛谷P1507]NASA的食物计划 以及 对背包问题的整理

    P1507 NASA的食物计划 题面 每个物品有三个属性,"所含卡路里":价值\(v\),"体积":限制1\(m_1\),以及"质量":限制 ...

  7. Tips for Sync Vimtex and PDF

    vimtex synctex: \lv. skim synctex: to display the TeX source line corresponding to a point in the PD ...

  8. Hackintosh Power Management

    Also, be aware that hibernation (suspend to disk or S4 sleep) is not supported on hackintosh. You sh ...

  9. zzuli1427 NO.6校赛----数字转换

    1427: 数字转换 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 572  Solved: 153 SubmitStatusWeb Board Des ...

  10. 【转】jieba.NET与Lucene.Net的集成

    首先声明:我对Lucene.Net并不熟悉,但搜索确实是分词的一个重要应用,所以这里还是尝试将两者集成起来,也许对你有一参考. 看到了两个中文分词与Lucene.Net的集成项目:Lucene.Net ...