Vue实现简单分页器
提前说明:这原本是一个Jquery分页器,因为公司项目前后端不分离,以前的分页用的是基于.net的分页器。后来我引入了jquery分页器,在我掌握Vue之后,又自己写了一些基于Vue的插件(为什么不用成熟的Vue插件库,还是因为前后端没分离)但是前后端相对最开始的混杂已经算是分得很开了。
创新互联服务项目包括加格达奇网站建设、加格达奇网站制作、加格达奇网页制作以及加格达奇网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,加格达奇网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到加格达奇省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
分页器的样式是bootstrap风格的,是一个完全自定义样式的分页器,这意味着你可以很轻松把它改成你想要的样子(例子效果图如下)。
所有的分页器DEMO,都不会太简单,所以想要真正的掌握(支配)一款好用的分页插件,请务必耐心看下面的使用示例代码(本demo的下载地址,点击可以作为项目直接打开使用),另外也写了详细的注释并尽可能的保证简单好用。
引用bootstrap(如果你希望是bootstrap风格)
或者你完全可以自己写自己想要的风格!因为分页器的html结构是js生成的。
需要引用的脚本文件有(资源均在文章底部下载包里)。
按如下顺序引入:
1.jQuery
2.Vue
3.jgPaginator.js
贴代码,看注释:
分页组件 {{nova.text}}
以上就是分页的全部实现代码,想要完全掌握,只看DEMO肯定是不够的,所以这里是DEMO的下载地址,里面包含了所有需要引用的资源文件以及未压缩的分页器核心:jqPaginator.js。你需要好好看看它的源码!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网站名称:Vue实现简单分页器
浏览路径:http://myzitong.com/article/jdjese.html