基于vue2.0实现仿百度前端分页效果（一）

<h3 id="前言">前言

最近在接手一个后台管理项目的时候，由于之前是使用jquery+bootstrap做的，后端使用php yii框架，前后端耦合在一起，所以接手过来之后通过vue进行改造，但依然继续使用的bootstrap框架，所以需要使用到vue来实现前端的分页效果。

先看实现效果图

分析一下，我们想要的效果是什么样的 1、每页只显示10个可见分页数 2、当点击到第7页的时候，左边显示从2开始，第一页不可见，右边显示到11页

对于的算法如下：

left = curPage - pageGroup/2
right = curPage + pageGroup/2 - 1

其实实现也非常简单，并不难

下面是整个实现分页的代码

//html代码

            
            

            
            

        
        

//js代码

var vm = new Vue({

el: '#app',data: {

msg:'hello',curItem:'',curPage:1,total:211,limit:10,pageGroup:10//分页条数 默认7个分页数

},created: function () {

console.log('created')

},mounted: function () {

console.log('mounted')

},computed:{

totalPage:function(){

return Math.ceil(this.total / this.limit)

},pagelist:function(){

var list = [];

var count = Math.floor(this.pageGroup/2),center = this.curPage;

var left = 1,right = this.totalPage;
                if(this.totalPage>this.pageGroup){
                    if(this.curPage>count+1){
                        if(this.curPage < this.totalPage - count){
                            left = this.curPage - count;
                            right = this.curPage + count-1;
                        }else{
                            left = this.totalPage - this.pageGroup+1;
                        }
                    }else{
                        right = this.pageGroup;
                    }
                }

                // 遍历添加到数组里
                while(left<=right){
                    list.push({
                        text:left,val:left
                    });
                    left++;
                }
                return list;
            }
        },methods:{
        changePage:function(idx){
            if(idx!=this.curPage &amp;&amp; idx>0 &amp;&amp; idx<=this.totalPage){
                this.curPage = idx;
            }
        },login:function(){
            alert('login')
        }
      }
    })</code></pre>
<h3 id="最后">最后