本文只是一個(gè)簡(jiǎn)單地DEMO，所以不會(huì)用vue全家桶去構(gòu)建一個(gè)工程。

一、引入vue.js

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

二、分頁(yè)css（包含一些簡(jiǎn)單地動(dòng)畫(huà)效果）

.pagewrap {
    padding: 25px 0;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    color: #666;
    text-align: center;
    font-size: 14px;
}

.pagewrap i {
    height: 34px;
    padding: 0;
    border: 1px solid #ccc;
    line-height: 34px;
    border-radius: 3px;
    width: 34px;
    display: inline-block;
    cursor: pointer;
    margin: 0 4px;
    vertical-align: middle;
}

.pagewrap i.button {
    width: 68px;
}

.pagewrap i:hover {
    border-color: #fdb800;
    color: #fdb800;
    animation: buttonshake .4s ease-out forwards;
}

.pagewrap i.current:hover, i.current, i.button:hover {
    border-color: #fdb800;
    color: #fdb800;
    animation: none;
}

.pagewrap i.disabled, i.disabled:hover {
    background: #EFEFEF;
    border-color: #EFEFEF;
    color: #AAA;
    cursor: text;
    animation: none;
}

.pagewrap i.ellipsis, i.ellipsis:hover {
    background: none;
    border-color: #FFF;
    color: #AAA;
    cursor: text;
    animation: none;
}

@-webkit-keyframes buttonshake {
    25% {
        -webkit-transform: rotate(45deg);
    }
    75% {
        -webkit-transform: rotate(-45deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes buttonshake {
    25% {
        transform: rotate(45deg);
    }
    75% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

三、分頁(yè)html（for循環(huán)生成分頁(yè)按鈕和樣式條件）

<div id="app">
    <div class="pagewrap">
        <i v-for="button in page.buttons"
           :class="{button: button.button, disabled: button.disabled, current: button.current, ellipsis: button.ellipsis}"
           @click="button.current || button.ellipsis || button.disabled || loadList(button.number);">
            {{button.title}}
        </i>
    </div>
</div>

四、分頁(yè)js（可以嘗試傳入不同參數(shù)打印buttons）

var app = new Vue({
   el: '#app',
   data: {
       page: {}
   },
   methods: {
       pagination(current, total) {
           var buttons = [];
           if (total) {
               var last = {
                   title: '上一頁(yè)',
                   disabled: !(current > 0),
                   button: 1,
                   number: current - 1,
                   log: '{"evtname":"上一頁(yè)","evtvalue":"prev"}'
               };
               var next = {
                   title: '下一頁(yè)',
                   disabled: !(current < total - 1),
                   button: 2,
                   number: current + 1,
                   log: '{"evtname":"下一頁(yè)","evtvalue":"next"}'
               };
               buttons.push(last);
               var i = 0;
               if (total <= 10) {
                   i = 0;
                   for (; i < total; i++) {
                       buttons.push({
                           title: i + 1,
                           number: i,
                           current: current == i
                       });
                   }
               } else if (current < 5) {
                   i = 0;
                   for (; i < 8; i++) {
                       buttons.push({
                           title: i + 1,
                           number: i,
                           current: current == i
                       });
                   }
                   buttons.push({
                       title: '…',
                       ellipsis: 1
                   });
                   buttons.push({
                       title: total,
                       number: total - 1
                   });
               } else if (total - current - 1 < 5) {
                   buttons.push({
                       title: '1',
                       number: 0
                   });
                   buttons.push({
                       title: '…',
                       ellipsis: 1
                   });
                   i = total - 8;
                   for (; i < total; i++) {
                       buttons.push({
                           title: i + 1,
                           number: i,
                           current: current == i
                       });
                   }
               } else {
                   buttons.push({
                       title: '1',
                       number: 0
                   });
                   buttons.push({
                       title: '…',
                       ellipsis: 1
                   });
                   i = current - 2;
                   for (; i < current + 4; i++) {
                       buttons.push({
                           title: i + 1,
                           number: i,
                           current: current == i
                       });
                   }
                   buttons.push({
                       title: '…',
                       ellipsis: 1
                   });
                   buttons.push({
                       title: total,
                       number: total - 1
                   });
               }
               buttons.push(next);
           }
           console.log(buttons);
           return buttons;
       }
   }，
   created() {
       // 當(dāng)前第5頁(yè)，一共21頁(yè)
       this.page.buttons = this.pagination(5, 21);
    }
})

效果圖（到這里簡(jiǎn)單的樣子已經(jīng)出來(lái)了）

pagination.png

五、配合后臺(tái)數(shù)據(jù)，引入axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

data: {
    page: {
        number: 0,
        size: 10
    }
},
// methods里添加方法
methods: {
    loadList() {
        // 后端給的url地址,傳參一般是當(dāng)前頁(yè)數(shù)和展示條數(shù)
        axios.post(URL, {
            page: this.page.number || 0,
            size: this.page.size
        })
        .then(data => {
            console.log("加載列表成功");
            // 這里的傳值具體看后端返回?cái)?shù)據(jù)
            this.page.buttons = this.pagination(data.current, data.total);
        })
        .catch(data => {
             console.log("加載列表失敗");
        });
    }
}，
// 調(diào)用方法
created() {
     // this.page.buttons = this.pagination(5, 21);
     this.loadList();
}