vue翻页

<div class="page-turning" v-if="count>0">
  <ul v-if="page < 8" class="am-pagination am-pagination-right">
    <li v-bind:class="{ 'am-disabled': currentPage == 1 }" v-on:click="updateCurrentPage(currentPage-1)"><a href="#">&laquo;</a></li>
    <li v-for="item in page" :class="{'am-active': item == currentPage}" v-on:click="updateCurrentPage(item)"><a href="#">{{item}}</a></li>
    <li v-bind:class="{ 'am-disabled': currentPage == page }" v-on:click="updateCurrentPage(currentPage+1)"><a href="#">&raquo;</a></li>
  </ul>
  <ul v-else-if="currentPage<page-6" class="am-pagination am-pagination-right">
    <li v-bind:class="{ 'am-disabled': currentPage == 1 }" v-on:click="updateCurrentPage(currentPage-1)"><a href="#">&laquo;</a></li>
    <li class="am-active"><a href="#">{{currentPage}}</a></li>
    <li v-on:click="updateCurrentPage(currentPage+1)"><a href="#">{{currentPage+1}}</a></li>
    <li v-on:click="updateCurrentPage(currentPage+2)"><a href="#">{{currentPage+2}}</a></li>
    <li><a href="#">...</a></li>
    <li v-on:click="updateCurrentPage(page-2)"><a href="#">{{page-2}}</a></li>
    <li v-on:click="updateCurrentPage(page-1)"><a href="#">{{page-1}}</a></li>
    <li v-on:click="updateCurrentPage(page)"><a href="#">{{page}}</a></li>
    <li v-on:click="updateCurrentPage(currentPage+1)"><a href="#">&raquo;</a></li>
  </ul>
  <ul v-else class="am-pagination am-pagination-right">
    <li v-on:click="updateCurrentPage(currentPage-1)"><a href="#">&laquo;</a></li>
    <li v-for="item in [6,5,4,3,2,1,0]" :class="{'am-active': page-item == currentPage}" v-on:click="updateCurrentPage(page-item)"><a href="#">{{page-item}}</a></li>
    <li v-bind:class="{ 'am-disabled': currentPage == page }" v-on:click="updateCurrentPage(currentPage+1)"><a href="#">&raquo;</a></li>
  </ul>
</div>

<script>
new Vue({
    el: '#app',
    data: function() {
        return {
            list: [],
            search: "",
            count: 0, // 商品总数
            page: 1, // 总页数
            currentPage: 1, // 当前页数
        }
    },
    created: function() {
        var that = this;
        that.list = # (list);
        that.count = that.list.count;
        that.page = Math.ceil(that.list.count / 10);// 一页10个
    },
    methods: {
        // 修改查询出的商品列表的当前页码
        updateCurrentPage: function(page) {
            var that = this;

            if (page < 1 || page > that.page) {
                return;
            }

            that.currentPage = page;

            that.getList();
        }
});
</script>

少于7页 多于7页
最后几页显示情况