html+vue.js 实现漂亮分页功能可兼容IE

<div id="app" v-cloak @click="showOption=false">
 第{{pageIndex}}页, 每页显示{{pageSize}}条
 <div v-show="pageTotalNum > 1" class="pageContainer">
  共{{dataListLength}}条
 <ul class="pagesInner">
  <li class="page" @click="prevOrNext(-1)"><span aria-hidden="true">&lt;</span></li>
  <li class="page" v-for="(item, index) in pages" :key="index" :class="{actived: item == pageIndex}" @click="selectPage(item)">
  <span>{{item}}</span>
  </li>
  <li class="page" @click="prevOrNext(1)"><span class="fa fa-chevron-right" aria-hidden="true">&gt;</span></li>
 </ul>
 <div class="page-size-box">
  <span @click.stop="showOption=!showOption">{{pageSize}}条/页</span>
  <ul class="size-option" v-show="showOption">
  <li v-for="(item, index) in pageSizeList" :key="index" @click="pageSize=item;showOption=false">{{item}}条/页</li>
  </ul>
 </div>
 跳至&nbsp;
  <form id="frm1">
   <input type="text" v-model="goToPage" style="text-align: center;">
  </form>
 &nbsp;页&nbsp;
 button @click="handleGoToPage">确定</button>
 </div>
</div>

<script src="/UploadFiles/2021-04-02/vue.js">