vue 手写分页

     data:{                 crossing_status:CROSSING_STATUS,                 crossing_list:[],                 time:null,                 log: {                     page: 1,                     pages: 1,                     total: 0,                     count: 20,                     displayPage: 5,                     list: []                    },                 selectedDate:"",             },             computed:{               crossingList:function(){                   return this.crossing_list.slice()               },               logPageInfo: function () {                 var ar = [];                 if (this.log.pages < this.log.displayPage || this.log.pages == this.log.displayPage + 1) { //数字全部显示                     for (var i = 1; i <= this.log.pages; i++) {                         ar.push(i)                     }                 } else if (this.log.page < this.log.displayPage - 1) {//后面显示省略号                     for (var i = 1; i < this.log.displayPage; i++) {                         ar.push(i)                     }                     ar.push(this.log.pages);                 } else if (this.log.page <= this.log.pages && this.log.page > this.log.pages - this.log.displayPage + 2) {  //前面显示省略号                     ar.push(1);                     for (var i = this.log.pages - this.log.displayPage + 2; i <= this.log.pages; i++) {                         ar.push(i);                     }                 } else {  //前后显示省略号                     ar.push(1);                     var d, e, f = (this.log.displayPage - 3) / 2;                     (this.log.displayPage - 3) % 2 == 0 ? d = e = f : (d = Math.floor(f), e = Math.ceil(f));                     for (var i = this.log.page - d; i <= this.log.page + e; i++) {                         ar.push(i);                     }                     ar.push(this.log.pages);                 }                 return ar;             },             },   <!-- 分页 -->         <div class="text-right zh-mt-20 clearfix">             <div class="zh-page zh-page-black fr">                 <div class="zh-page-content">                     <ul>                         <li :class="{'zh-disabled':log.page == 1,'notclick':log.page == 1}">                             <a @click="logPageChange(1)">首页</a></li>                         <li :class="{'zh-disabled':log.page == 1,'notclick':log.page == 1}">                             <a @click="logPageChange(log.page-1)">上一页</a></li>                         <li :class="{'zh-cur': log.page == 1}"><a @click="logPageChange(1)">1</a></li>                         <template v-for="p in logPageInfo">                             <li v-if="p > 0 && log.pages > 2"                                 :class="{ 'zh-cur': log.page == p, 'hide':(p==1 || p==log.pages)}">                                 <a @click="logPageChange(p)">{{p}}</a>                             </li>                         </template>                         <li :class="{'hide':(log.pages < log.displayPage || log.pages -log.page<(log.displayPage-2))}">                             <a>...</a>                         </li>                         <li :class="{ 'zh-cur': log.page == log.pages,'hide':log.pages == 1}">                             <a @click="logPageChange(log.pages)">{{log.pages}}</a>                         </li>                         <li :class="{'zh-disabled':log.page == log.pages,'notclick':log.page == log.pages}">                             <a @click="logPageChange(parseInt(log.page)+1)">下一页</a></li>                         <li :class="{ 'zh-cur':  log.page == log.pages,'zh-disabled':log.page == log.pages,'notclick':log.page == log.pages}">                             <a @click="logPageChange(log.pages)">尾页</a>                         </li>                     </ul>                     <span class="zh-total">共{{ log.pages }}页</span>                 </div>             </div>         </div>