vue分页

需要参数:

• page: 当前页码

• total_page: 总页数

代码片段

<ul class="pagination" v-if="total_page > 1">
  <li  v-if="page > 1" class="previous">
    <a href="javascript:void(0);" v-on:click="paginate_to(1);">«</a>
  </li>
  <template v-for="p in total_page">
    <template v-if="p == page">
      <li class="active">
        <a href="javascript:void(0);">{{ p }}</a>
      </li>
    </template>
    <template v-else-if="(page - 2 < p && p < page + 2) || p <= 3 || p > total_page - 3 ">
      <li>
        <a href="javascript:void(0);" v-on:click="paginate_to(p);">{{ p }}</a>
      </li>
    </template>
    <template v-else-if="(page - 3 < p  && p  < page + 1) || p <= 2 || p > total_page - 4 ">
      <li>
        <a href="javascript:void(0);" v-on:click="paginate_to(p);">.....</a>
      </li>
    </template>
  </template>
  <li v-if="page < total_page" class="previous">
    <a href="javascript:void(0);" v-on:click="paginate_to(total_page);">»</a>
  </li>
</ul>

计算属性

computed: {
  songWithExtraStuff () {
    const song = this.song
    return {
      ...song,
      duration: max(song.tracks.map(track => track.duration))
    }
  }
}