前端vue+分页

直接贴代码

前台

<div id="courseList">
    <div id="content" v-cloak>
        <div class="div-relative" id="a" v-for="item in currentPageData">
            <div class="bg1" :style="{backgroundImage: 'url(' + item.image + ')'}"></div>
            <div class="bg2"></div>
            <div class="bg3" @click="onclick(item)">
                <h4>{{ item.name }}</h4>
                <p>{{ item.deptName }}</p>
                <p>{{ item.cotypeName }}</p>
                <p>{{ item.tetyName }}</p>
            </div>
        </div>

    </div>

    <nav aria-label="">
        <ul class="pager">
            <li id="prev"><a href="#"><span aria-hidden="true">&larr;</span>Previous</a></li>
            <li id="next"><a href="#">Next<span aria-hidden="true">&rarr;</span></a></li>
        </ul>
    </nav>

</div>

js分页代码

var courses = new Vue({
        el: "#content",
        data: {
            courses: [],        //所有课程数据
            currentPageData: [],    //当前页显示内容
            totalPage:1,        //页面数量
            currentPage:1,      //当前页号
            pageSize: 8     //每一页显示数据量
        },
        created: function () {
            this.getCourses();

        },
        methods: {
            getCourses: function () {
                var that = this;
                axios.get("获取数据的链接").then(
                    function (response) {

                        console.log(response.data.data);
                        that.courses = response.data.data;
                        for (var i = 0; i < response.data.data.length; i++) {
                            // 如果没有图片，则使用默认图片
                            if (response.data.data[i].image === null)
                                response.data.data[i].image = "img/noPic.jpg";
                            else
                                response.data.data[i].image = "图片网址前缀" + that.courses[i].image;
                            //console.log(that.courses[i].image);
                        }
                        //计算一共有多少页
                        that.totalPage = Math.ceil(that.courses.length / that.pageSize);
                        //当计算结果为0时设置页号为1
                        that.totalPage = that.totalPage === 0 ? 1 : that.totalPage;
                        that.setCurrentPageData();
                        console.log(that.currentPageData);

                        /*上一页*/
                        $("#prev").click(function () {
                            console.log(that.currentPage);
                            if (that.currentPage === 1)
                                return;
                            that.currentPage--;
                            that.setCurrentPageData();
                        });

                        /*下一页*/
                        $("#next").click(function () {
                            console.log(that.currentPage);
                            if (that.currentPage === that.totalPage)
                                return;
                            that.currentPage++;
                            that.setCurrentPageData();
                        });

                    }
                )
            },
            setCurrentPageData: function () {
                let begin = (this.currentPage - 1)* this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.courses.slice(begin, end);
            },
            onclick: function (courseInfo) {
                console.log(courseInfo);
                window.localStorage.setItem("id", courseInfo.id);
                window.location.href = "front_course.html";
            }
        }
    });