Vue.js - 使用Vue实现简简单单的分页功能

MoLeft

发布于 2022-08-30 11:01:39

8290

发布于 2022-08-30 11:01:39

文章被收录于专栏：用砖头敲代码

前言

最近又开始考古之前的光年后台模板了，然后发现这个分页还挺好看的，但是实现起来很麻烦，所以就结合Vue2实现了一个动态的换页效果。

Html

<div id="page" class="container text-center">
    <nav>
        <ul class="pagination pagination-circle">
            <li :class="(nowPage==1)?'disabled':''">
                <a @click="prevPage" href="javascript:void(0)">
                    <span><i class="mdi mdi-chevron-left"></i></span>
                </a>
            </li>
            <li :class="(nowPage==page)?'active':''" v-for="page in pageList">
                <a @click="changePage(page)" href="javascript:void(0)">{{page}}</a>
            </li>
            <li :class="(nowPage==pageList.length)?'disabled':''">
                <a @click="nextPage" href="javascript:void(0)">
                    <span><i class="mdi mdi-chevron-right"></i></span>
                </a>
            </li>
        </ul>
    </nav>
</div>

JavaScript

var page = new Vue({
    el: '#page',
    data: {
        lists: [],
        pageList: [1, 2, 3, 4, 5, 6, 7, 8],
        nowPage: 1
    },
    methods: {
        changePage: function(page) {
            this.nowPage = page;
            // TODO 分页的逻辑代码
        },
        prevPage: function() {
            if (this.nowPage == 1) {
                return;
            }
            this.changePage(this.nowPage - 1);
        },
        nextPage: function() {
            if (this.nowPage == this.pageList.length) {
                return;
            }
            this.changePage(this.nowPage + 1);
        }
    },
});