记vue分页

公司业务发展使用vue做主要技术，做了一个vue的分页

引用了bootstrap的样式

代码如下：

首先定义一个分页模板:

 template:`<ul class="pagination pull-right">
                <li :class="{'disabled': current <= 1}"><a href="javascript:void(0);" @click="setCurrent($event, 1)"> 首页 </a></li>
                <li :class="{'disabled': current <= 1}"><a href="javascript:void(0);" @click="setCurrent($event, current - 1)"> 上一页 </a></li> 
                <li v-for="p in pages" :class="{'active': current == p}"><a href="javascript:void(0);" @click="setCurrent($event, p)"> {{ p }} </a></li>
                <li :class="{'disabled': current >= pageCount}"><a href="javascript:void(0);" @click="setCurrent($event, current + 1)"> 下一页</a></li>
                <li :class="{'disabled': current >= pageCount}"><a href="javascript:void(0);" @click="setCurrent($event, pageCount)"> 尾页 </a></li>
            </ul>`

效果是这样的：

然后就是定义数据：

 data: function() {
        return {
            current: 1,
            pageCount: 1,
        }
    }

接下来我们再这样来：

computed: {
        pages: function () {
            var limit = 6;//这里可以自己定义
            var min = 1;
            var max = this.pageCount;
            var current = this.current;

            if (min < current - limit) {
                min = current - limit;
            }

            if (max > current + limit) {
                max = current + limit;
            }

            var list = [];
            for (var p = min; p <= max; p++) {
                list.push(p);
            }
            return list;
        }
    }

再来我们的方法：

setCurrent: function(e, page) {
            if (this.current != page && page >= 1 && page <= this.pageCount) {//这里是判断当前页是否是首页或尾页
                e.page = page;
                this.$emit("pagechange", e) //触发父组件事件
            }           
        },

        setPager: function (pager) {
            this.current = pager.pageNumber;
            this.pageCount = pager.pageCount;
        }

再来就是我们父组件调用：

  <my-pagination ref="pagination" @pagechange="pagechange"></my-pagination>

父组件的方法：

pagechange:function(e){        //页码数
            this.current = e.page;
            //this.loadData();加载后台返回的数据
         },
loadData:function(){         //加载列表
           var data = {}  //请求参数
           this.$ajax("//接口地址",data).$success(function (data) {  //这里的$ajax和$success是自己做过封装的，小伙伴就调自己的好啦
           //成功后的操作 

           this.$refs.pagination.setPager(data.pager)//映射组件里面的setPager  
           }) 
         }

好啦，vue分页就完成了，对vue涉及不是很深，在项目中运用到就记录下来，方便下次查用

写的不好的地方请各位大神指教

推荐一个之前参考的网址：http://www.cnblogs.com/yuqing6/p/7061647.html