基于vue2.0实现分页

今天在做分页，网上找了找，找到的分页都和需求的不大类似，烦的一批，自己做了一个比较愚蠢的方案。
产品分页需求：
1.当前页=首页=尾页=1时，不显示页码。
2.当前页=首页=1时，不显示“上一页”
3.当前页=尾页时，不显示“下一页”
4.尾页小于9时，所有页码都显示
5.尾页大于9时，显示前7页，紧跟省略号后接末页，以及下一页。
6.尾页大于9且处于末页时，显示后7页
6.尾页大于9，当前页大于6时，只显示前两页和后两页，另显示首页和末页以及上一页和下一页。

html：
<div class="page-b">
<div class="page" v-if="pages !== 1">
<span @click="prev" v-if="currentPage !== 1"><</span>
<span @click="first" v-if="firstPage == true"
v-bind:class="{active : 1 == currentPage}">1</span>
<span class="point" v-if="pointN == true">...</span>
<span v-bind:class="[{active : page == currentPage},{point : page == '...'}]"
v-for="(page, index) in pageArr"
@click="goTo(page)">{{page}}</span>
<span class="point" v-if="pointL == true">...</span>
<span @click="last" v-if="lastPage == true"
v-bind:class="{active : pages == currentPage}">{{pages}}</span>
<span @click="next" v-if="currentPage !== pages">></span>
</div>
</div>

js：
let list = new Vue({
el:'#page-b',
data:{
pages:10,//总页数
currentPage:1,//当前页
firstPage:'',//是否显示第一页
lastPage:'',//是否显示最后一页
pointN:'',//省略号前部
pointL:'',//省略号后部
},
methods:{
first:function () {

4000
this.currentPage = 1;
},
prev:function () {
this.currentPage = this.currentPage - 1;
},
next:function () {
this.currentPage = this.currentPage + 1;
},
last:function () {
this.currentPage = this.pages;
},
goTo:function (index) {
this.currentPage = index;
}
},
computed:{
pageArr:function () {
var arr = [];
if(this.pages <= 9){//页数小于9全部显示
this.firstPage = true;
this.lastPage = true;
this.pointN = false;
this.pointL = false;
for (var i = 2; i <= this.pages -1; i++){
console.log(i);
arr.push(i);
}
return arr;
} else {
if(this.currentPage < 6){//小于6页时
this.firstPage = true;
this.pointL = true;
this.pointN = false;
this.lastPage = true;
for(var z = 2; z <= 7; z++){
arr.push(z)
}
return arr;
} else {//当前页大于6页
if(this.currentPage + 2 < this.pages){//五条中显示前两页和后两页
arr = [
this.currentPage -2,
this.currentPage -1,
this.currentPage,
this.currentPage +1,
this.currentPage +2
];
this.pointN = true;
if(this.currentPage < this.pages){
this.lastPage = true;
}
return arr
} else {
this.pointN = true;
this.pointL = false;
arr = [
this.pages -6,
this.pages -5,
this.pages -4,
this.pages -3,
this.pages -2,
this.pages -1,
];
return arr
}

}
}
},
}
});

效果：







现在每次分页用ajax直接从后台取数据，目前每次取十个，不排除以后会做一个select实现每页个数变化，虽然是实现了，但还是蠢得一匹，后期待优化