vue自定义分页组件案例

自定义bootstrap3的分页组件

<template>
    <nav class="pagination-nav">
        <ul class="pagination">
            <li :class="{
    'disabled': currentPage<=1}"><a href="javascript:;" @click="currentPage=1">首页</a></li>
            <li :class="{
    'disabled': currentPage<=1}"><a href="javascript:;" @click="prev"><span>&laquo;</span></a></li>
            <li v-for="i in pageList" :key="i" :class="{
    'active': currentPage == i}">
                <a href="javascript:;" v-text="i" @click="changePage(i)"></a>
            </li>
            <li :class="{
    'disabled': currentPage>=pageTotal}"><a href="javascript:;" @click="next"><span>&raquo;</span></a></li>
            <li :class="{
    'disabled': currentPage>=pageTotal}"><a href="javascript:;" @click="currentPage=pageTotal">末页</a></li>
        </ul>
        <div class="pagination-other">
            <span v-if="showJumper">