Vue练习-分页

最新推荐文章于 2024-06-19 20:53:45 发布

骑单车的贝塔

最新推荐文章于 2024-06-19 20:53:45 发布

阅读量253

点赞数

文章标签： 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>

骑单车的贝塔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue练习-分页

以前用jquery做分页各种dom操作非常痛苦，最近在学习vue终于不用操作dom别提有多舒服了。下面仿照iview里面的分页组件来实现一个分页 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&
复制链接

扫一扫