最近有几个项目用了vue，他们只需要一个分页功能。所以百度发现几篇文章介绍的真实方式有点复杂，自己一个人读一个写一个都没耐心。

使用js实现的分页结果如下所示：

钢性铸铁。页面栏{ margin:40px}ul，li { margin: 0pxpadding: 0px}li{ list-style: none}。页面栏Li : first-child a { margin-left : 0px }。页面栏a{ border: 1px实心# ddd文本装饰：无；相对位置：向左浮动：padding: 6px 12px左边距：-1px；线高： 1.42857143；color: # 337ab7cursor:指针}。页面栏a : hover { background-color : # eee；}.page-bar a . ban click { cursor : no-不允许；}.页面栏。激活a { color: # fffcursor:默认值；背景-color : # 337 ab 7；border-color : # 337 ab 7；}.页面栏I { font-style : normal；color: # d44950margin: 0px 4pxfont-size : 12px；}模板

div class=' page-bar ' 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=' index in indexes ' v-bind : class=' { ' active ' : cur==index } ' a v-: click=' btnClick(index)' { { index } }/a=all ' a v-: click=' cur，pageclick()'下一页/a/Li Li v-if=' cur==all ' a class=' ban click '下一页/a/Li lia of I { { all } }/I page/a/Li/ul/。

Var pagebar=newvue ({el: '。page-bar '，data: {all3360 20，//total page cur: 1，///当前页码})；调用new Vue({ parameter})会创建一个基本组件，并将其分配给变量pageBar。

El是element的缩写，找到模板。数据就是数据。

知道总页数，但是显示页码还需要一些计算，所以显示页码是计算属性。

所以我们将使用计算

computed : { indexs 3360 function(){ var left=1；var right=this.allvar ar=[]；if(this . all=5){ if(this . cur 3 this . cur this . all-2){ left=this . cur-2 right=this . cur 2 } Else { if(this . cur=3){ left=1 right=5 } Else { right=this。allleft=这个。all-4}}} while(左=右){ar。按(左)左}返回ar}}查看页面上显示的循环：

Li v-for=' indexs ' v-bind : class=' { ' active ' : cur==index } ' a v-: click=' BTN click(index)' { { index } }/a/Liv-for是循环呈现输出的计算属性indexs。每个循环的子元素被分配给索引v-bind:class绑定类。当渲染到当前角标记时，添加一个on:click类将绑定到该事件。我传入索引作为参数，然后进行判断，然后默认传递事件event。然后我们将方法字段添加到Vue的选项中。

方法： {BTN点击：函数(数据){//页码点击事件if(数据！=this.cur) {this.cur=data}}，page click : function(){ console . log(' now on ' this . cur ' page ')；}}，组件交互

组件写好后，问题来了。当用户点击页面进行更改时，如何通知其他组件进行相应的更改？您可以在该函数下插入一条语句，在该函数中，页面角会发生变化，以通知其他组件。但是，这种方法很差。可以使用

watch: { cur:函数(oldValue，new value){ console . log(arguments)；}}观察到的cur数据。当它改变时，你可以得到前后值。然后通知其他组件。

完整代码：

！DOCTYPE html html towneta name=' viewport ' content=' width=device-width，initial-scale=1.0，minimal-scale=1.0，maximum-scale=1.0，user-scalable=no '/meta charset=' utf-8 ' title/title meta name=' keywords ' content=' '/meta name=' description ' content=' '/script type=' text/JavaScript ' src=' http 3360 js/vue。量滴js '/脚本样式。页面栏{ 0}ul，Li { margin : 0pxpadding : 0px } Li { list-style : none } .页面栏李：第一个孩子a {左边距： 0px } .页面栏a{ border: 1px实心# ddd文本装饰：无；相对位置：向左浮动：padding: 6px 12px左边距：-1px；线高： 1.42857143;color: # 337ab7cursor:指针}。页面栏：悬停{背景色： # eee}.页面栏a .禁止点击{光标：否-不允许；}.页面栏。激活a { color: # fffcursor:默认值；背景-颜色： # 337 ab 7；边框颜色： # 337 ab 7；}.页面栏I { font-style : normal；color : # d 44950 margin 3360 0px 4px font-size : 12px；}/style/head body div class=' page-bar ' 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==index } ' a v-: click=' BTN click(index)' { { index } }/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/ul/div脚本类型=' text/JavaScript ' var page bar=new Vue({ El : }).页面栏，data: { all: 8，//总页数cur: 1/当前页码}，watch: { cur:函数(旧值，新值){控制台。日志(参数)；} }，methods: { btnClick:函数（数据){//页码点击事件如果(数据！=this.cur){ this.cur=data } }，页面点击： function(){ console。日志('现在在"这个。cur "页');} }，计算出： { indexs 3360 function(){ var left=1；var right=this . all var ar=[]；如果(这个。all=5){ if(this。弯曲这个。弯曲这个。all-2){ left=this。cur-2 right=这个。cur 2 } else { if(this。cur=3){ left=1 right=5 } else { right=this。all-4 } } } while(左=右){ ar。push(左)left } return ar } })/script/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。