本篇文章主要介绍了vue的一个分页组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本篇文章主要介绍了VUE实现一个分页组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。具体如下： 文件page.vue为一个pc端的分页组件,基础的分页功能都有，基本的思路是，页面是用数据来展示的，那就直接操作相关数据来改变视图 Getting started import Page from ‘./page.vue’ 从目录引入该文件,在父组件注册使用 复制代码 代码如下:

分页一般和表格一起用，分页链接作为表格的一部分，将分页链接封装成一个独立的组件，然后作为子组件嵌入到表格组件中，这样比较合理。 效果： 代码： 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index !