Vue2.0实现简单分页及跳转效果

用Vue2.0实现一个数据的分页及页数的跳转，代码如下：

数据绑定：{{.} } v-:点击=' BTN '单击（项目)' {{item}}/a事件绑定：v-在v-:上，单击=' cur-，pageClick()'上一页/a判断：v-if Li v-if=' cur==1 ' a class=' ban click '上一页/a/li循环：v-代表Li v-代表='索引中的项v-bind : class=' { ' active ' : cur==item } '/Li修改样式：v形装订绑定班级属性Li v-for=' indexs中的项v-bind : class=' { ' active ' : cur==item } '/Li HTML代码如下：

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /title分页/title style * { margin : 0；padd : 0；} #分页符{ margin-top : 20px；左边距left: 20px} #分页符李{列表式：无；} #分页符a{border: 1px实心# ddd文本装饰：无；向左浮动：padd : 6px 12 pcolor : # 337 ab 7 cursor :指针} #分页符：悬停{背景色： # eee} #分页符a .banclick{cursor:不允许；} #分页。激活a { color: # fffcursor:默认值；背景-颜色： # 337 ab 7；边框颜色： # 337 ab 7；} #分页符I { font-style : normal；color : # d 44950 margin 3360 0px 4px font-size : 12px；} #分页。跳跃盒跳转页面{边框： 1px实心# DDD；左边距左： 40像素右： 33像素宽度： 40px向左浮动：} #分页。跳跃盒jumpbtn {cursor:指针；左边距left: 10px} #分页跳箱跳BTN :主动{ color : # 337 ab 7；}/style脚本src=' http :https://cdn。jsdeliver。net/NPM/vue/dist/vue。js '/script/head dydiv id=' page-break ' ul Li v-if=' cur 1 ' a v-: click=' cur-，pageClick()'上一页/a/Li Li v-if=' cur==1 ' a class=' ban click '上一页/a/Li Li v-for=' indexs ' v-bind : class=' { ' active ' : cur==item } ' a v-: click=' BTN click(item)，page click()' { { item } }/a/Li Li v-if=' cur！=all ' a v-: click=' cur，pageClick()'下一页/a/Li Li v-if=' cur==all ' a class=' ban click '下一页/a /li lia共我{{all}}/i页/a/li div class='jumpbox '输入类型=' number ' class='跳转页面'/a class='跳转BTN ' v-: click=' page skip()'跳转/a /div /ul/div/body/htmljs代码如下：

新Vue({ el: '#page-break '，data: { cur: 1，all: 20 }，watch: { cur:函数(新值，旧值){ console.log(参数);} }，方法： { btnClick(num){ if(num！=这个。{这个。cur=num} }，pageClick(){ console.log('现在是"这个。cur "页)}，PageSkip(){ var MaxPage=this。全部；var skipPage=Number(文档。getelementsbyclassname('跳转页')[0].值);console.log(类型为skip page)；if(！skipPage){ alert('请输入跳转页码');返回；} else if(Skippage1 | | SkippageMaxPage){ alert('您输入的页码超过页数范围了！');返回；} else {//this。cur=Skippage这个。BTN click(Skippage)；这个。页面点击()；} } }，计算出： { indexs(){ var left=1；var right=this . all var arr=[]；如果(这个。all=7){ if(this。弯曲这个。简化他的。all-3){ left=this。cur-3；右=这个。cur 3；} else if(这个。cur=4){ left=1；右=7;} else { left=this。all-6；右=this.all} } while(左=右){ arr.push(左);向左；}返回arr} }})分页显示如下：

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