Bootstrap+vue.js三分页按钮实现

自己根据自己理解编写的前端分页实现，仅供参考，如有雷同，纯属巧合，绝非抄袭

<!-- 分页信息 -->

<nav aria-label="Page navigation">
  <ul class="pagination">
  <!-- 分页信息展示 -->
  <li class="disabled"> <span aria-hidden="true">当前【{{ page.pageNum }}/{{ pages }}】页</span></li>
  
    <li v-if="page.pageNum > 1">
      <a href="#" aria-label="Previous" v-on:click="getlists(page.pageNum-1)">
        <span aria-hidden="true">上一页</span>
      </a>
    </li>
     <li v-else  class="disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">上一页</span>
      </a>
    </li>
       <!-- 分页按钮1 -->
    <!-- 当前第一页，不可选 -->
  <li v-if="page.pageNum==1"  class="disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">1</span>
      </a>
    </li>
    <!-- 当前非第一页 -->
       <li v-else>
<!-- 最后一页，总页数大于2 -->
      <a href="#" aria-label="Previous" v-if="page.pageNum == pages && pages>2" v-on:click="getlists(page.pageNum-2)">
        <span aria-hidden="true">{{page.pageNum-2}}</span>
      </a>
      <!-- 非最后一页，或最后一页为2 -->
      <a href="#" aria-label="Previous" v-else v-on:click="getlists(page.pageNum-1)">
        <span aria-hidden="true">{{page.pageNum-1}}</span>
      </a>
    </li>
    
     <!-- 分页按钮2 -->
     <!-- 当前页，不可选 （不是第一页，并且不是最后一页或者一共两页）-->
    <li v-if="page.pageNum>1 && ((pages>page.pageNum) || (pages==2))"  class="disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">{{page.pageNum}}</span>
      </a>
    </li> 
    <!-- 当前第一页，总页数大于 1-->
    <li v-if="page.pageNum==1 && pages>1">
      <a href="#" aria-label="Previous" v-on:click="getlists(page.pageNum+1)">
        <span aria-hidden="true">{{page.pageNum+1}}</span>
      </a>
    </li>
    <!-- 当前最后一页，总页数大于 2-->
    <li  v-if="page.pageNum==pages && pages>2">
        <a href="#" aria-label="Previous" v-on:click="getlists(page.pageNum-1)">
        <span aria-hidden="true">{{page.pageNum-1}}</span>
      </a>
     </li>
    
<!--   分页按钮3 -->
<!-- 当前页为最后一页，不可选 -->
    <li v-if="pages == page.pageNum && pages>2">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">{{ page.pageNum }}</span>
      </a>
    </li>
    <!-- 当前页为第一页，共三页 -->
  <li v-if="page.pageNum==1 && pages>2">
      <a href="#" aria-label="Previous" v-on:click="getlists(page.pageNum+2)">
        <span aria-hidden="true">{{page.pageNum+2}}</span>
      </a>
    </li>
    <!-- 当前页不为第一页，不为最后一页 -->
    <li v-if="page.pageNum != 1 &&  pages != page.pageNum">
      <a href="#" aria-label="Previous" v-on:click="getlists(page.pageNum+1)">
        <span aria-hidden="true">{{page.pageNum+1}}</span>
      </a>
    </li>
 
    <li v-if="page.pageNum < pages">
      <a href="#" aria-label="Previous" v-on:click="getlists(page.pageNum+1)">
        <span aria-hidden="true">下一页</span>
      </a>
    </li>
     <li v-else  class="disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">下一页</span>
      </a>
    </li>
  </ul>
</nav>