基于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. 机器学习 MLIA学习笔记（三）之 KNN（二） Dating可能性实例

    这是个KNN算法的另一实例,计算Dating的可能性. import numpy as np import os import operator import matplotlib import ma ...

  2. 【转】VC6在Win7下打开文件崩溃问题

    http://www.cnblogs.com/Leon5/archive/2011/08/24/2152670.html 1.微软针对这个问题发布了一个补丁包.下载地址 2.下载之后是一个源码包,解压 ...

  3. F4+2 团队项目软件设计方案

    目录 1引言 1.1编写目的 1.2背景 1.3定义 1.4参考资料 2总体设计 2.1需求规定 2.2运行环境 2.3基本设计概念和处理流程 2.4功能描述 2.5功能器求与程序的关系 2.6人工处 ...

  4. Flutter学习笔记（三）-- 事件交互和State管理

    先来看看准备界面: image.png 目标是修改图中红色实线框中的喜欢和不喜欢的五角星的修改,以及数字的修改. 在修改之前,有必要先了解一些相关的信息. 知识点 前面简单的提到过,有些Widget是 ...

  5. Codeforces 545D - Queue

    545D - Queue 思路:忍耐时间短的排在前面,从小到大排序,贪心模拟,记录当前等待时间,如过等待时间大于当前的这个人得忍耐时间,那么就把这个人扔到最后面,不要管他了(哼╭(╯^╰)╮,谁叫你那 ...

  6. Codeforces 834C - The Meaningless Game

    834C - The Meaningless Game 数学. 思路1:判断a•b能不能化成v3且a%v==0且b%v==0.v可以直接用pow求(或者用cbrt),也可以二分求:还可以用map映射预 ...

  7. MyBatis中的@Mapper注解 @Mappe与@MapperScan关系

    从mybatis3.4.0开始加入了@Mapper注解,目的就是为了不再写mapper映射文件 现在项目中的配置 public interface DemoMapper{ int deleteByPr ...

  8. mRNA基本概念

    mRNA是由DNA的一条链转录而来的(可以是正链,也可以是反链),DNA是由非编码区和编码区组成,编码区也有其特殊的结构,主要有外显子和内含子组成. mRNA的一个重要性质就是可变剪切,也就是同一个编 ...

  9. English trip -- VC(情景课)3 B Bamily members

    xu言: 今天,好困啊 -__-. . zZ 早点睡吧...适当的休息,才能更好的学习 Vocabulary focus  husband wife uncle aunt brother sister ...

  10. 安卓出现Invalid layout of java.lang.String at value

    Project->Properties->Run/Debug setting->选择类->classpath->删除Bootstrap Entries下面的文件 参考