https://www.cnblogs.com/vivaxiaonan/p/9987985.html

基于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实现分页组件

    http://www.php361.com/index.php?c=index&a=view&id=4671 http://www.yanglajiao.com/article/sin ...

  2. Muse UI — 基于 Vue2.0 的 Material Design UI 库

    Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...

  3. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,发现自己的园龄竟然有4年之久了,没记错的话刚接触编程就知道了博客园,也就是说我入坑4年了?时光啊~.刚学习编程的时候最喜欢的就是来园子里听大神们吹牛逼,看着他们装逼就觉得很 ...

  4. 基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释

    基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...

  5. 基于vue2.0 + elementUI 后台管理平台

    Vue-Admin-Demo 这是一个基于vue2.0 + elementUI 后台管理平台 Github: https://github.com/xiahuahua/vue-vux-demo(欢迎S ...

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

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

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

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

  8. 基于vue2.0+ 抽奖项目

    前言 临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码 简介 基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...

  9. vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin

    介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...

最新文章

  1. DOS、Mac 和 Unix 文件格式+ UltraEdit使用
  2. linux安装grub
  3. Git push file exceed GitHub's file size
  4. 监听以太网(一) Packet32包说明
  5. v-if 与v-show 的区别及使用场景
  6. JVM 内存模型组成+经典总结
  7. 大厂面试算法系列-如何从无序链表中移除重复项(二)-递归法
  8. 马斯克说话还能算数吗?声称删除Twitter账号却依旧活跃
  9. caffe linux跑自己数据,caffe+linux平台——跑深度学习的流程
  10. Linux登录的shell信息,Linux展示登录Shell信息
  11. NFT 项目的 7 种市场营销策略
  12. python pandas库的介绍和使用
  13. 计算机组成原理74138译码器连接,74138(74138译码器工作原理)
  14. 阿里全国脱贫攻坚先进-万祥军:谋定中国农民丰收节交易会
  15. background图片叠加_java实现图片的叠加效果
  16. mac 远程控制android,允许Mac用户使用其Android设备远程控制其Mac媒体
  17. BZOJ_1778_[Usaco2010 Hol]Dotp 驱逐猪猡_概率DP+高斯消元
  18. Ajax执行向php请求的js脚本
  19. 博士申请 | 美国范德堡大学NDS实验室招收数据挖掘/机器学习全奖博士生
  20. fcntl的详细使用

热门文章

  1. webservice入参是一个对象_程序员技术精进:面向对象与服务的分析与设计
  2. 如何配置Mybatis?(详解)
  3. 天下谁人不识君:awt如何使用弹窗功能?
  4. ❤️《JUC并发编程从入门到高级》(建议收藏)❤️
  5. ES6---new Promise()使用方法
  6. Python之魔法方法详解
  7. ubuntu之安装sublime text
  8. 2.73 交叉编译python_Python这么火,要不要学?听听华为工程师怎么说...
  9. 使用SQL语句获得服务器名称和IP 地址
  10. Can't locate ExtUtils/MakeMaker.pm