今天用某视频剪辑软件来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。所有代码的源码可以再开源代码库上下载的到：下载地址先来看一下实现效果：

点击查看效果

整体思路

我们先看一下使用到的文件的目录：

我们在pageComponentsTest.vue页面引入了pageComponent.vue分页组件。整体思路是通过小道具来达到组件的灵活通用的效果，整体语法是使用某视频剪辑软件的伏特计语法。

pageComponent.vue实现

首先实现一个分页，需要知道数据总条数，一个页面显示的数据条数和当前显示第几页的数据。那么我们在pageComponent.vue里面的小道具就有了。看下面的代码：

道具： {//分页配置页面配置： {类型：对象，要求：真，默认(){返回{页面大小： 10，//一页的数据条数第：页0,//当前页的索引total: 0，//总的数据条数pageTotal: 0 //总的页数} } }根据用户入参，我们可以使用计算属性来计算一个总页数的变量：

computed: { //计算总页数，如果传了总页数，直接取页面合计的值，如果传了总计，那么根据页面大小去计算page total(){ const config=this。页面配置if(配置。页面总数){返回配置。页面总计} else { if(config。页面大小配置。total){返回数学。天花板(配置。总计/配置。页面大小)}否则{返回0 } }有了总页数，和当前页，就需要各种判断来实现我们的超文本标记语言部分了，这里分四中情况

总页数小于8,只需要直接遍历到8就行了。总页数大于8,但当前页小于四的。总页数大于8,当前页靠后的。总页数大于8,当前页在中间的。下面看具体的实现：

！-上一页-button @ click=' prePage ' : disabled='当前页面===1 '上一页/button！-总页数小于8的-模板v-if=' pageTotal=showPageNo '按钮v-for=' I in page total ' @ click=' changeCurrentPage(I)' : class=' { active : I==' CurrentPage } ' : key=' I ' { I } }/button/template v-else-if=' CurrentPage 4 '按钮v-for=' I in 6 ' @ click=' changeCurrentPage(I)' : class=' { active 33366-下一页-button @ click='下一页' : disabled='当前页===总页数'下一页/按钮可以看到页面上需要实现3个方法，分别是上下页，和点击页面的方法。

methods : { PrePage(){ this . CurrentPage-=1 this。$emit('changeCurrentPage '，this.currentPage) }，NextPage(){ this . CurrentPage=1 this。$emit('changeCurrentPage '，this.currentPage) }，ChangeCurrentPage (I) {this。当前页面=我这个。$ emit ('changecurrentpage '，这。currentpage)}}以上是pageComponent.vue的大致实现，每次页面发生变化时，都会触发changecurrentpage方法的回调，通知当前使用该组件的页面当前页面发生了变化。

pageComponentsTest.vue的实现

参考页面相对简单，只要传入组件所需的相应参数，我们就可以显示我们的组件。引用部分：

模板div类='pageComponentsTest '页面-组件：页面-配置=' PageconfigTotal ' @ ChangeCurrentPage=' ChangePage '/页面-组件页面-组件：页面-配置=' PageconfigPageTotal '/页面-组件/div/模板，引用：

{ name: 'pageComponentsTest '，data(){ return { page config total : { total :21，pageSize:10，pageNo:1}，page config page total : { total :21，page size 336010，pageNo:1，pageTotal:50} }，components 3360 { ' page-component ' 3: page component 'pageconfigtotal.pageno=page}}}摘要

可以看出，使用vue实现分页组件一般比较容易，比使用jQuery方便很多。使用vm模式开发前端的一个最明显的优势就是数据模式部分与视图页面部分同步，开发者不需要考虑这个过程，所以总体来说要简单很多。

以上是边肖介绍的实现一个vue寻呼群功能的100行代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！