在 Vue 中使用分页-js教程-PHP中文网

在 Vue 中使用分页

Guanhui

发布： 2020-06-13 09:52:02

转载

2873人浏览过

在 Vue 中使用分页

分页功能通过允许用户以较小的块或页面可视化数据来增强用户体验。下面介绍如何创建带分页的 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--;
      }
}

登录后复制

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

麦当秀MindShow AiPPT

麦当秀｜MINDSHOW是一款百万用户正在使用的三分钟生成一份PPT的AI应用系统。它利用引领前沿的人工智能技术，能够自动完成演示内容的设计。

224

查看详情

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

登录后复制

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

paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
     return this.listData.slice(start, end);
}

登录后复制

修改：在一开始我使用 .splice 来复制数组，但更完美的做法是使用 .slice 方法，在这里感谢 Alexander Karelas。

在 template 中：

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>

登录后复制

我希望在最开始或者最末尾阻止用户按下按钮，对于 prevPage 按钮，我加入了 :disabled="pageNumber=0" 而对于 nextPage 按钮，我加入 :disabled="pageNumber >= pagecount -1"。

推荐教程：《JS教程》

以上就是在 Vue 中使用分页的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JS代码规范指南_ESLint配置详解 js中使用removeChild()方法删除dom节点 JavaScript性能监控_关键指标采集与分析系统 JavaScript支付集成_Stripe SDK安全配置数据结构：JS实现链表、栈与队列