JS实现本地数据分页

首先准备好
数据源 OriginData: [],
备用数组用来展示 currentList: [],
每页展示条数：number： 10，
数据总条数 total: 10,
总页数 allpage: 10,
当前页面显示页数 currentPage: 1,
左按钮
右按钮
HTML部分

<div class="bottom">
    <div class="left-arrow marright" @click="leftClick()"></div>
    <div class="marright">共&nbsp;{{total}}&nbsp;条</div>
    <div class="marright"><span class="marright-index">{{currentPage}}</span>&nbsp;/&nbsp;{{allpage}}&nbsp;页</div>
    <div class="right-arrow" @click="rightClick()"></div>
</div>

data部分

data() {
    return {
        number: 27, // 每页展示条数
        currentPage: 1, // 当前页数
        modelLists: window.ModelList.modelList, // 原数据列表                  重点！！！
        currentList: null, // 当前页面展示的列表                               重点！！！
        total: window.ModelList.modelList.length, // 数据条数
        allpage: 3, // 总页数
    };
},

监听

watch: {
    // 当当前页数发生变化时，调用此函数
    index() {
        this.getcurrentNumber();
    },
},

获取数据源

mounted() {
    // 获取当前分页值的变化
    this.getcurrentNumber();
},
// 获取当前页面数据
getcurrentNumber() {
    // 计算总页数
    this.allindex = Math.ceil(this.total / this.number);
    // 展示当前页面数据
    const m = (this.currentPage - 1) * this.number;
    const n = this.currentPage * this.number;
    this.currentList = this.modelLists.slice(m, n);
},
// 左翻页
leftClick() {
    this.currentPage -= 1;
    if (this.currentPage <= 1) {
        this.currentPage = 1;
    }
},
// 右翻页
rightClick() {
    this.currentPage += 1;
    if (this.currentPage >= this.allpage) {
        this.currentPage = this.allpage;
    }
},

效果图