Vue练习-分页

最新推荐文章于 2024-11-03 19:51:25 发布

骑单车的贝塔

最新推荐文章于 2024-11-03 19:51:25 发布

阅读量274

点赞数

文章标签： vue.js 前端分页

本文链接：https://blog.csdn.net/qq_38949193/article/details/86766054

版权

以前用jquery做分页各种dom操作非常痛苦，最近在学习vue终于不用操作dom别提有多舒服了。

下面仿照iview里面的分页组件来实现一个分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
    <nav>
        <ul class="pagination">
            <li :class="[currentPage-1<1?'disabled':'']"
                @click.prevent="setCurrentPage(currentPage-1 < 1 ?currentPage:currentPage-1)">
                <a href="#">
                    <span>&laquo;</span>
                </a>
            </li>
            <li v-for="pageObj in showPage()" @click.prevent="setCurrentPage(pageObj.value)"
                :class="[currentPage==pageObj.text?'active':'']" :title="pageObj.title">
                <a href="#" v-text="pageObj.text"></a>
            </li>
            <li :class="[currentPage+1>totalPage?'disabled':'']"
                @click.prevent="setCurrentPage(currentPage+1>totalPage?currentPage:currentPage+1)">
                <a href="#">&raquo;</a>
            </li>

        </ul>
    </nav>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            total: 200,
            display: 10,
            currentPage: 1,
            jumpPage: 5,
            ignorePage: 4
        },
        methods: {

            setCurrentPage: function (page) {
                this.currentPage = page
            },
            showPage: function () {
                var pageList = [];
                this.totalPage = this.total / this.display;
                for (var i = 1; i <= this.totalPage; i++) {
                    pageList.push({text: i, value: i, title: i})
                }
                if (this.currentPage - 1 > this.ignorePage) {
                    pageList = pageList.slice(this.currentPage - 3, this.totalPage);
                    pageList.unshift({text: "...", value: this.currentPage - 5, title: "向前5页"});
                    pageList.unshift({text: 1, value: 1});
                }
                if (this.totalPage - this.currentPage > this.ignorePage) {
                    if (this.currentPage - 1 > this.ignorePage) {
                        pageList = pageList.slice(0, 4 + 3);
                    } else {
                        pageList = pageList.slice(0, this.currentPage + 2);
                    }
                    pageList.push({text: "...", value: this.currentPage + 5, title: "向后5页"});
                    pageList.push({text: this.totalPage, value: this.totalPage, title: this.totalPage});
                }
                return pageList
            }
        }
    })
</script>
</body>
</html>