<li v-for="(item, index) in pages" :key="index" :class="{actived: item === currentPage}" // 给点击到的当前页码添加样式 @click="select(item)" // 添加一个点击事件 > ... methods: { select(item) { this.currentPage = item } } ... actived: { border-color: #2d8cf0; background-color: #2d8cf0; color: #fff; }
效果如下：
为了让当前页码更清楚，再在页面上加上当前多少页
<div>当前第{{currentPage}}页</div>
效果如下：
发现了一bug，就是我们每次点击的时候，都是将item的具体内容传递过去改变currentIPage的，但是当我们点的 ... 的时候就把它也传递过去了，但是它不是我们要的页码的数据，在计算的时候就出错了，所以我们需要做一点处理。同时，还有再点击当前页码的时候也不必再执行select函数了。
简单改写一下select函数：
select(n) { if (n === this.currentPage) return if (typeof n === 'string') return this.currentPage = n }
这样就正常了。
再把两侧icon向前一页和向后一页的功能加上，因为一个是加1一个是减1，所以写一个函数传递不同的参数就行了。
<li @click="prevOrNext(-1)"><span aria-hidden="true"></span></li> ... <li @click="prevOrNext(1)"><span aria-hidden="true"></span></li> ... prevOrNext(n) { this.currentPage += n }
效果如下：
呃，边界问题，当currentPage为1时就不能再减了，当它为最大时也不能再加了。
改写一下代码：
prevOrNext (n) { this.currentPage += n this.currentPage < 1 ? this.currentPage = 1 : this.currentPage > this.totalPages ? this.currentPage = this.totalPages : null }
这下就可以了，如图：
四、 结语
写到这里，这个分页器基本功能就写完了，当然，我们还可以继续封装，在每次改变currentPage的时候用this.$emit通知外面实现通信，还可以通过props来向内传递数据，比如传递totalPages等，这些都是可以继续完善的内容。最重要的一点，关于分页器的具体计算方法，我用的是最笨的方法，所以同志们要是知道更好的办法记得留言啊~