vue分页

需要参数:

• page: 当前页码

• total_page: 总页数

代码片段

 1<ul class="pagination" v-if="total_page > 1">
 2  <li  v-if="page > 1" class="previous">
 3    <a href="javascript:void(0);" v-on:click="paginate_to(1);">«</a>
 4  </li>
 5  <template v-for="p in total_page">
 6    <template v-if="p == page">
 7      <li class="active">
 8        <a href="javascript:void(0);">{{ p }}</a>
 9      </li>
10    </template>
11    <template v-else-if="(page - 2 < p && p < page + 2) || p <= 3 || p > total_page - 3 ">
12      <li>
13        <a href="javascript:void(0);" v-on:click="paginate_to(p);">{{ p }}</a>
14      </li>
15    </template>
16    <template v-else-if="(page - 3 < p  && p  < page + 1) || p <= 2 || p > total_page - 4 ">
17      <li>
18        <a href="javascript:void(0);" v-on:click="paginate_to(p);">.....</a>
19      </li>
20    </template>
21  </template>
22  <li v-if="page < total_page" class="previous">
23    <a href="javascript:void(0);" v-on:click="paginate_to(total_page);">»</a>
24  </li>
25</ul>

计算属性

1computed: {
2  songWithExtraStuff () {
3    const song = this.song
4    return {
5      ...song,
6      duration: max(song.tracks.map(track => track.duration))
7    }
8  }
9}