vue实现简单的分页组件

阅读更多

       在日常的工作中，总会遇到分页的使用，这次开始学习vue，就自己动手写一个简单的分页组件。

 

组件的样式采用的是 bootstrap 的分页，在此基础上添加分页的部分代码。

 

直接上代码，仅供参考：

1) template模板部分：

 

2)  组件的定义：

Vue.component("paginator",{

template:'#page',

 

  props: ['pages'],

data:function(){

return{

           current:1,

           limit:10

         }

},

methods:{

goto:function(index){

         if(index == this.current) return;

           this.current = index;

          //处理后续的请求

       }

}

 

 

});

3) 组件的使用

           

 

 

var vm = new Vue({

 el:'#app',

 data:{

 page:{

 totalPage:7

 }

 }

})；

 

简单的分页组件实现完毕。

页面展示效果如下：

 附件自己的测试文件。

• 
• 大小: 1.7 KB

• 查看图片附件