vue.js 2.0实现简单分页效果

本文实例为大家分享了vue.js 2.0实现分页效果的具体代码，供大家参考，具体内容如下

！DOCTYPE html html townleta charset=' UTF-8 '/title vue。js 2.0实现的简单分页/title style * { margin : 0；padd : 0；盒子尺寸：边框-box } html { font-size : 12px；font-family: Ubuntu、simHei、无衬线；font-weight : 400 } body { font-size : 1 rem } .文本中心{ text-align :居中；}.分页{ display : inline-block；左填充： 0;边距： 21 px 0；边界半径： 3px}.分页li { display: inline}。分页阿利{相对位置：向左浮动：padding: 6px 12px线高： 1.5;文本装饰：无；color: # 009a61背景-color : # fff；border: 1px固体# ddd左边距：-1px；列表样式：无；}.分页阿利：悬停{背景色： # eee}.分页。活动{ color: # fff背景-color : # 009 a61；边框-左侧：无；右边框：无；}.分页。主动：悬停{背景： # 009 a61光标：默认值；}.分页radius:第一个子边界左下角-半径： 3px边框-左上角-半径： 3px}.分页李：最后一个孩子a {边框-右下角-半径： 3px边框-右上角-半径： 3px}/style/head body div id=' app ' ul class=' pagining ' Li v-for=' index in all ' a v-bind : class=' cur===index 1？active ' : ' ' ' v-: click=' BTN click(index 1)' { { index 1 } }/a/Li/ul/div/body script src=' http : js/Vue。js '/script var VM=new Vue({ El : ' # app '，data: { cur: 1，//当前页码all: 8 /总页数}，watch: { cur:函数(newVal，oldVal){ //数值产生变化，触发回调console.log(newVal，oldVal)；} }，methods: { btnClick:函数(一){这个。cur=I；//ajax调取数据.} } })/脚本/html效果图

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