基于vue.js的分页插件详解

Vue.js的目标是通过尽可能简单的应用程序接口实现响应的数据绑定和组合的视图组件。想了解更多，请戳http://cn.vuejs.org/

超文本标记语言代码：

div class=' page-bar ' v-else ul Li style=' width : 11% ' v-if=' showFirst ' a v-: click=' cur-'/a/Li Li v-for=' index in indexs ' v-bind : class=' { ' active ' : cur==index } ' a v-: click(index)' { { index } }/a/Li style=' width :左边距-: 7% a共我{{all}}/i页/a/li /ul /div css部分，可根据自己的实际需要进行调整：页面栏{ margin-top : 21px；保证金-左侧： 11%;} .页面栏ul ,页面栏Li { margin : 0pxpadding : 0px }。页面栏ul li { list-style:无；border: 1px固体# ddd文本装饰：无；相对位置：向左浮动：文本对齐：中心；padd : 1px 0；左边距：-1px；线高： 1.42857143;color: # 337ab7cursor:指针；宽度： 8%;} .页面栏李：第一个孩子a {左边距： 0px } .页面栏。激活a { color: # fffcursor:默认值；背景-颜色： # 337 ab 7；边框颜色： # 337 ab 7；} .页面栏i { font-style:正常；color : # d 44950 margin 3360 0px 4px font-size : 12px；} js部分：

首先要创建一个基本组件

var vm=new Vue({ el: 'body '，data: { list: null，all: 1，//总页数cur: 1，//当前页码}, 继而要利用计算计算页码，

computed: { indexs:函数(索引){ var left=1；var right=this . all var ar=[]；如果(这个。all=11){ if(this。弯曲这个。弯曲这个。all-4){ left=this。cur-5；右=这个。cur 4；} else { if(this。cur=5){ left=1；右=10;} else { right=this.allleft=this。all-9；} } } while(左=右){ ar.push(左);向左；}返回ar；}，showLast:函数(){ if(this。cur==这个。all){ return false } return true }，showFirst:函数(){ if(this。cur==1){返回false }返回true } }要给元素加：click=' cur '事件，所以要在某视频剪辑软件里加方法方法：

方法： { btnClick:函数(项目){ //页码点击事件if (items！=this.cur) { this.cur=items } } }，其实到这里基本上就差不多了，但是可以优化一下，当用户触发点击事件时，页面发生改变，这时要通知其他组件做出改变。

watch: { cur:函数(旧值，新值){控制台。日志(参数)} }观察了坏蛋数据当它改变的时候，可以获取前后值。然后通知其他组件。

后期会在个人开源代码库上提交完整版代码

补充效果图展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。