vue的分页器实现

在自学vue后做表格数据时，需要做一个分页器来进行对分页数据的查询，所以自己做了一个简易的分页器

样式如下

此时来说一下分页器的实现

HTML

<template>
  <div class="container">
    <ul class="pager">
      <div class="page-size">当前位置：第{
  {postData.pageNo}}页</div>
      <li v-bind:class="{disabled:this.homePage}" @click="firstpage"><a href="#">首页</a></li>
      <li v-bind:class="{disabled:this.homePage}" @click="backpage"><a href="#">上一页</a>
      </li>
      <!-- middlePage :start-->
      <li v-for="(item, index) in pages" :key="index">
        <a v-if="item=='...'">
          {
  {item}}
        </a>
        <a v-if="item!='...'" @click="jumppage(item)">
          {
  {item}}
        </a>
      </li>
      <!-- middlePage :end -->
      <li v-bind:class="{disabled:this.endPage}" @click="nextpage"><a href="#">下一页</a></li>
      <li v-bind:class="{disabled:this.endPage}" @click="lastpage"><a href="#">尾页</a>
      </li>
      <li>
        <select class="form-control mb-3" @change="pagesize" v-model="record">
          <option value="5">5条/页</option>
          <option value="10">10条/页</option>
          <option value="15">15条/页</option>
          <option value="20">20条/页</option>
        </select>
      </li>
      <li>
        &nbsp;跳转到&nbsp;<input type="text" class="form-control" style="width: 50px;" v-model="specifyPage">&nbsp;页
        <butt