Vue2.0分页组件实战-CSDN博客

本文链接：https://blog.csdn.net/sinat_29173167/article/details/80831830

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>基于vue2.0分页</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <style>
        .margin {
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <footer class="margin ">
        <ul class="am-pagination  am-pagination-centered">
            <li>当前活跃页数：{{currentPage}}</li>
            <br>
            <li>页码个数限制：{{pageNums}}</li>
            <br>
            <li>总页数：{{totalPages}}</li>
        </ul>


        <ul class="am-pagination  am-pagination-centered">
            <li :class="[currentPage <= 1 ? 'am-disabled' : '']">
                <a @click="prevBtnClick">&laquo; Prev</a>
            </li>

            <li v-for="(value,index) in pages()" :class="[index + startPage ==  currentPage? 'am-active' : '']" v-if="startPage + index <= totalPages">
                <a @click="pageBtnClick(index + startPage)">{{ index + startPage }}</a>
            </li>

            <li :class="[currentPage >= totalPages? 'am-disabled' : '']">
                <a @click="nextBtnClick">Next &raquo;</a>
            </li>
        </ul>
    </footer>


    <script type="text/javascript">
        var footer = new Vue({
            el: 'footer',
            data: {
                startPage: 1,  //开始页数
                currentPage: 1, //当前页数
                totalPages: 0, // 服务器获取的分页数
                pageNums: 5, //页码个数限制
            },
            methods: {
                pages: function () {
                    if (this.totalPages >= this.pageNums) {
                        return new Array(this.pageNums)
                    } else if (this.totalPages < this.pageNums) {
                        return new Array(this.totalPages)
                    }
                },
                prevBtnClick: function () {
                    if (this.currentPage <= 1) return;
                    this.currentPage--;
                    if (this.currentPage > 1 && this.currentPage < this.startPage) {
                        this.startPage -= this.pageNums;
                    }
                },
                nextBtnClick: function () {
                    if (this.currentPage > this.totalPages) return;
                    this.currentPage++;
                    if (this.currentPage >= this.startPage + this.pageNums) {
                        this.startPage += this.pageNums;
                    }
                },
                pageBtnClick: function (page) {
                    this.currentPage = page;
                    // 点击某一页，渲染、操作等等
                }
            },
            mounted() {
                // ajax()获取总页数
                this.totalPages = 14;
            }
        })
    </script>
</body>

</html>