vue实现分页组件

<template>
 <div class="pagebox">
  <ul>
   <li v-if="this.condition.pageno > 1 && this.pages.length > 4" class="sides"><a @click="prepage()"><s class="font_main"></s></a></li>
   <li v-for="(item, index) in pages" :class="{'curtpage': condition.pageno == item}">
    <a v-if="item" @click="gopage(item)" >
     <s>{{item}}</s>
    </a>
    <a  rel="external nofollow" v-else>...</a>
   </li>
   <li class="sides" v-if="condition.pageno < pagecount && this.pagecount > 4"><a @click="nextpage()"><s class="font_main"></s></a></li>
  </ul>
 </div>
</template>

<script>
 export default {
  props: {
   page: object,
   condition: object
  },
  data () {
   return {
    pagesize: this.condition.pagesize
   }
  },
  computed: {
   pagecount: function () {
    return this.page.totalcount / this.condition.pagesize > 0 ? this.page.totalcount % this.condition.pagesize === 0 ? this.page.totalcount / this.condition.pagesize : math.ceil(this.page.totalcount / this.condition.pagesize) : 1
   },
   pages () {
    let c = this.condition.pageno
    let t = this.pagecount
    let arr = []
    if (t === 1) {
     return arr
    }
    if (t <= 4) {
     for (let i = 1; i <= t; i++) {
      arr.push(i)
     }
     return arr
    }
    if (c <= 3) return [1, 2, 3, 0, t]
    if (c >= t - 1) return [1, 0, t - 2, t - 1, t]
//    if (c === 4) return [1, 2, 3, 4, 5, 0, t]
//    if (c === (t - 2)) return [1, 0, t - 3, t - 2, t - 1, t]
    return [1, 0, c - 1, c, c + 1, 0, t]
   }
  },
  methods: {
   gopage (indexpage) {
    if (this.indexpage !== this.condition.pageno) {
     this.condition.pageno = indexpage
     this.$emit('search')
    }
   },
   prepage () {
    if (this.condition.pageno !== 1) {
     this.condition.pageno--
     this.gopage(this.condition.pageno)
    }
   },
   nextpage () {
    if (this.condition.pageno !== this.pagecount) {
     this.condition.pageno++
     this.gopage(this.condition.pageno)
    }
   }
  }
 }
</script>