在 Vue 中使用分页-木庄网络博客

2022-03-07 14:27:02 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者Guanhui，侵删。

分页功能通过允许用户以较小的块或页面可视化数据来增强用户体验。下面介绍如何创建带分页的 Vue.js 组件，以便我们一次只能查看部分数据。

我将首先在我们的 JavaScript 对象中逐一进行分析，然后显示模板。

我唯一需要的本地数据是页码。

data(){
    return {
      pageNumber: 0  // default to page 0
    }
}

对于 props 来说，数据是必要的，另外我还定义了 size 这个参数来保存每一页数据的数量的最大值。

props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
}

在 methods 中，我定义了下一页和上一页的两个方法：

methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
}

我使用计算属性值来计算一共有多少页：

pageCount(){
      let l = this.listData.length,
          s = this.size;
      return Math.floor(l/s);
}

paginatedData 就是获取过滤后的数据的计算属性：

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者