利用VUE框架，实现列表分页功能

原创作品转载请注明出处

先来看一下效果图：

功能描述：
1. 点击页面序号跳转到相应页面；
2. 点击单左/单右，向后/向前跳转一个页面；
3. 点击双左/双右，直接跳转到最后一页/第一页；
3. 一次显示当前页面的前三个与后三个页面；
4. 始终显示最后一个页面；

HTML：

  <!-- 分页开始 -->
<div class="u-pages" style="margin-bottom:20px; margin-top:10px;">
 <ul>
     <li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> &lt;&lt; </a></li>
     <li v-if="showPre" class="crt"><a v-on:click="minus(cur)"> &lt; </a></li>

     <template v-for="index in indexs" >
         <li class="{
   {
   classRenderer(index)}}">
             <a v-on:click="btnClick(index)" >{
   {
   index}}</a>
         </li>
     </template>

     <li v-if="showMoreTail" class="crt">..</li>
     <li class="{
   {
   classRenderer(pageNo)}}"><a @click="btnClick(pageNo)">{
   {
   pageNo}}</a></li>
     <li v-if="showTail" class="crt"><a v-on:click="plus(cur)">&gt;</a></li>
     <li v-if="showTail" class="crt"><a v-on:click="jumpTail(cur)">&gt;&gt;</a><