基于vue.js实现的分页

本文主要介绍基于某视频剪辑软件的分页原生写法。

先邮局上效果图：

超文本标记语言部分，将页作为一个单独的组件

脚本类型=' text/x-template ' id=' page ' ul class=' pagining ' Li v-show=' current！=1 ' @ click=' current-goto(current)' a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '上一页/a/Li Li v-for=' page中的索引@ click=' goto(index)' : class=' { ' active ' : current==index } ' : key=' index ' a href=' # ' rel=' external nofollow ' rel=' external nofollow ' { index } }/a/Li Li v-show=' all page！=当前所有页面！=0 ' @ click=' current goto(current)' a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '下一页/a/Li/ul/script div id=' app ' page/page/div js部分：

script Vue.component('page '，{ template: '#page '，data : function(){ return { current : 1，//当前页码showItem: 5，//最少显示5个页码allpage: 13 /总共的} }，计算出： { page s 3360 function(){ var PAG=[]；如果(这个。当前这个。显示项目){//如果当前的激活的项小于要显示的条数//总页数和要显示的条数那个大就显示多少条var i=Math.min(this.showItem，this。所有页面)；而{ PAG。未移位(I-)；} } else { //当前页数大于显示页数了var middle=这个。当前数学。地板(这个。显示项目/2)，//从哪里开始i=this.showItemif(中间(this。所有页面-这个。show item)){ middle=(this。所有页面-这个。显示项目)1 }而(我-){ PAG。推(中)；} }返回pag } }，methods: { goto:函数(index) { if (index==this.current)返回；this.current=index//这里可以发送创建交互式、快速动态网页应用的网页开发技术请求} } }) var vm=new Vue({ el: '#app '，}) /scriptcss部分：

正文{ font-family : ' Segoe UI}李{列表式：无；} a { text-decoration : none} .分页{位置：相对；} .分页li {显示：内联块；margin: 0 5px}。分页阿利{ padd :5雷姆1雷姆；显示器：内联块；border: 1px固体# ddd背景# fffcolor: # 0E90D2}。分页阿利：悬停{背景： # eee} .分页李。活动a {背景： # 0e 90d 2；color: # fff}最后附上开源代码库地址：https://github。com/AmberHu/vue-page

总结

以上所述是小编给大家介绍的基于vue.js实现的分页，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！