vue实现简单的分页组件

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

 

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

 

直接上代码，仅供参考：

1) template模板部分：

<script type="text/x-template" id="page">

<!--pagination-->

<nav aria-label="Page navigation">

 <ul class="pagination">

   <li :class="{'disabled':current == 1}"  @click="current!=1 &&current-- && goto(current--)">

     <a href="#" aria-label="Previous" :disabled="current==1">

       <span aria-hidden="true">&laquo;</span>

     </a>

   </li>

   

   <li v-for="index in pages.totalPage" @click="goto(index)" :class="{'active':current == index}" :key="index" >

   <a href="#">{{index}}</a>

   </li>

   

   <li :class="{'disabled':pages.totalPage == current}"  @click="current!=pages.totalPage &&current++ && goto(current++)">

     <a href="#" aria-label="Next">

       <span aria-hidden="true">&raquo;</span>

     </a>

   </li>

   

 </ul>

</nav>

 

</script>

 

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) 组件的使用

            <!--use myPaginator component-->

 

<div id="app"><paginator v-bind:pages="page"></paginator></div>

 

var vm = new Vue({

 el:'#app',

 data:{

 page:{

 totalPage:7

 }

 }

})；

 

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

页面展示效果如下：

 附件自己的测试文件。