vue实现简单的分页功能[通俗易懂]

vue实现简单的分页功能[通俗易懂]分页其实就是对一组数据分组!而vue又刚好是数据驱动,所以我们只需要关注数据层就行了!分页开始—>变量:data(){return{//假设这是后台传来的数据来源data:[],//所有页面的数据totalPage:[],//每页显示数量pageSize:5,…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

 

分页其实就是对一组数据分组!而vue又刚好是数据驱动,所以我们只需要关注数据层就行了!分页开始—>

变量:

 data() {
    return {
      // 假设这是后台传来的数据来源
      data: [],
      // 所有页面的数据
      totalPage: [],
      // 每页显示数量
      pageSize: 5,
      // 共几页
      pageNum: 1,
      // 当前显示的数据
      dataShow: "",
      // 默认当前显示第一页
      currentPage: 0
    };
  },

步骤1:计算页数

    // 这里简单模拟一下后台传过来的数据
    for (let i = 0; i < 601; i++) {
      this.data.push({ name: "liu" ,look:"very handsome"});
    }
    // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
    this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;

步骤二:根据页数对数据分组,并存进每一页

   for (let i = 0; i < this.pageNum; i++) {
      // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
      // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5, 则第一页是1-5条,即slice(0,5),第二页是6-10条,即slice(5,10)...
      this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize * (i + 1))
    }
   // 获取到数据后显示第一页内容
    this.dataShow = this.totalPage[this.currentPage];

步骤三:设置默认显示页,上一页下一页,只需要切换当前页面的索引值就行了


    // 上一页和下一页
    // 下一页
    nextPage() {
      if (this.currentPage === this.pageNum - 1) return ;
      this.dataShow = this.totalPage[++this.currentPage];
    },
    // 上一页
    prePage() {
      if (this.currentPage === 0) return ;
      this.dataShow = this.totalPage[--this.currentPage];
    }

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187031.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • dategrip 2022.01 激活码【2021免费激活】

    (dategrip 2022.01 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~0V…

  • Spring注解 @Component、@Repository、@Service、@Controller @Resource、@Autowired、@Qualifier 解析…

    Spring注解 @Component、@Repository、@Service、@Controller @Resource、@Autowired、@Qualifier 解析…

  • 欢迎使用CSDN-markdown编辑器[通俗易懂]

    欢迎使用CSDN-markdown编辑器[通俗易懂]引用块内容欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗Ctrl+B斜体Ctrl+I引用

  • 2021Java高级面试题及答案,太牛了!

    2021Java高级面试题及答案,太牛了!什么是RPC?RPC原理是什么?什么是RPC?RPC(RemoteProcedureCall)—远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议。比如两个不同的服务A、B部署在两台不同的机器上,那么服务A如果想要调用服务B中的某个方法该怎么办呢?使用HTTP请求当然可以,但是可能会比较慢而且一些优化做的并不好。RPC的出现就是为了解决这个问题。RPC原理是什么?服务消费方(client)调用以本地调用方式调用服务;client

  • lstm分类模型_模型有哪两种

    lstm分类模型_模型有哪两种介绍LSTM模型在语言模型,机器翻译等领域取得了非凡的成就,然后LSTM网络有几百万的参数以及需要数周在多GPU系统中进行训练。因此,一下介绍两种方法来缩减网络参数以及训练时间。两种方法分别为factorizedLSTM(FLSTM)以及groupLSTM(GLSTM)。FLSTMFLSTM网络主要是将大的LSTM矩阵转化为两个小的矩阵。LSTM模型简单介绍在LST…

  • 计算机网络谢希仁第八版 课后答案第七版课后答案

    计算机网络谢希仁第八版 课后答案第七版课后答案谢希仁计算机网络第七版课后答案第一章概述1-01计算机网络向用户可以提供那些服务?答:连通性和共享1-02简述分组交换的要点。答:(1)报文分组,加首部(2)经路由器储存转发(3)在目的地合并1-03试从多个方面比较电路交换、报文交换和分组交换的主要优缺点。答:(1)电路交换:端对端通信质量因约定了通信资源获得可靠保障,对连续传送大量数据效率高。(2)报文交换:无须预约传输带…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号