之前一直想要自己试着实现一个分页器，但是一直拖，今天写完，大概照着网易云音乐的样子来完成。这个小例子很简单，通过这个小例子，可以学习到Vue计算属性的使用，并了解到写分页器需要区分的情况。这篇文章会慢慢从头来实现这个小例子，相信你一定会学会，而且看完了我的思路之后说不定会有更棒的思路和想法！
实现的效果是这样子的：
一、先简单布局
效果如下：
有两个地方说下：
二、理清思路，在这个例子里最重要
它有几个特点：
分页的三种情况：
第一种：当前页码小于等于5的时候
如图：
这种情况首页尾页保留，倒数第二个页面为...,页码从头往后算
第二种情况：当前页码处于最后5个的时候
如图：
第三种情况：页面处于较中间位置的时候
如图：
首页和尾页都保留，第二个页码和倒数第二个页码都为 ... ，同时页面从当前页码位置向两侧算
三、用代码来实现上面的三种情况
从上面的思路来看，页码具体如何呈现由当前页码的位置决定，所以我们要在data里设置一个currentPage:1，而计算属性里用于渲染页码的pages通过currentPage来控制，同时还需要一个总页数totalPages:50。
先写第一种情况：
export default {
data() {
return {
currentPage: 1,totalPages: 50
}
},computed: {
pages() {
const c = this.currentPage
const t = this.totalPages
if (c <= 5) {
return [1,2,3,4,5,6,7,8,9,'...',t]
}
}
}
};
效果如下：
写第二种情况，再加个if：
export default {
data() {
return {
currentPage: 47,t]
} else if (c >= t - 4) {
return [1,t-8,t-7,t-6,t-5,t-4,t-3,t-2,t-1,t]
}
}
}
};
把currentPage的值设为>= 46，效果如下：
把第三种情况加上：
= t - 4) {
return [1,t] //第二种情况
} else {
return [1,c-3,c-2,c-1,c,c+1,c+2,c+3,t] //第三种情况
}
}
}
基本就是这样，已经可以通过改变currentPage的值查看分页器的变化了。
接下来实现点击相应的页码来改变currentPage的值，只要写一个点击事件再写一个函数就好了。
...
methods: {
select(item) {
this.currentPage = item
}
}
...
actived: {
border-color: #2d8cf0;
background-color: #2d8cf0;
color: #fff;
}
效果如下：
当前第{{currentPage}}页
