用vuejs实现一个简单的分页条

html模板

<ul>

    <li class="prev" :class="{disabled: search.page == 1}" @click="prev()">
        <a href="#">«上一页</a>
    </li>

    <li :class="[{active: search.page == index(i)}]" v-for="i in Math.min(5,totalPage)" 
@click="search.page = index(i)">
        <a href="#">{{index(i)}}</a>
    </li>

    <li class="dotted"><span>...</span></li>

    <li class="next" :class="{disabled: search.page == totalPage}" @click="next()">
        <a href="#">下一页»</a>
    </li>

</ul>

js代码

index(i){
   if (this.search.page<=3 || this.totalPage <= 5){
       return i;
   }else if(this.search.page >= this.totalPage-2){
       return this.totalPage-5+i;
   }else{
       return this.search.page-3+i;
   }
},

1.展示多少个正块

如果总页数小于5，就展示‘’总页数‘’个方块；如果总页数大于5，就展示5个方块。

2.方块里面的数字显示什么

a. index方法

         html模板的v-for循环里的 i 从1 到5 循环。我们把i用index(i)方法过滤一下，展示到方块上。

         index方法是传入i，返回一个数字。该数字就是方块展示的数字。

c. index方法的逻辑

         如果 当前页<=3 或 总页数  <=5  ，方块应该展示的数字就应该是1 到 5，或1到总页数。

         如果 当前页是后三页，且总页数大于5，方块应该展示的数字是 总页数-5+i

         如果 当前页是前三页和后三页之间，且总页数大于5，此时，方块应该展示的的数字是当前页-3+i。

3.点击某个方块，使该方块变成选中状态

        给方块绑定一个动态样式，当前页==index(i)时，把这个方块变成选中的样式。

           :class="[{active: search.page == index(i)}]"