第一次写博客，专门写给菜鸟看的，如果你是老鸟，你可以直接无视。

首先我们从豆瓣api获取到电影的数据列表

然后我们把他们切成一块一块的小数组

最后的数组将会是这样

 原理就是以上的内容，接下来直接附上代码

 注释：computeArr() 这个函数是将所有的数据重新组装成一个新的数组，下面的注释已经很清楚了，这里不必解释太多。

这样handleCurrentChange()这样函数是点击切换页数时候执行的，他将会决定你显示那一页的数据。

以上就是所有内容，最后附上个人的代码demo链接

https://gitee.com/zengjielin/element2.0-page

结合element-ui封装的一个分页函数的更多相关文章

  1. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  2. 【Django+Element UI】使用一个接口文件，搞定分页获取数据，模糊查询后分页获取数据

    1:序列化获取数据的接口设计 1:分页获取序列化数据 2:是个能传参数的接口 class Society(APIView): def post(self, request): keywords = s ...

  3. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  4. element ui table（表格）点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  5. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  6. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  7. 用 customRef 做一个防抖函数，支持 element 等UI库。

    这几天学习Vue的官网,看到 customRef 提供了一个例子,研究半天发现这是一个防抖函数,觉得挺好,于是把这个例子扩展了一下,可以用于表单子控件和查询子控件. 需求 v-model 基于 ele ...

  8. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  9. uinty3d使用ugui封装一个分页控件

    我们在显示数据时有的数据比较多,手机内存有限,我们不可能分配很多的控件来显示这些数据,分页是一个不错的选择.比如玩家交易行.我们现在封装一个自己简单的分页控件来显示玩家交易行. 分页控件的原理其实很简 ...

随机推荐

  1. ubuntu下安装3.6.5

    1.下载python3.6.5安装包 地址:https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 解压:tar -xvzf Python-3 ...

  2. Python3找出List中最大_最小的N个数及索引

    # -*- coding: utf-8 -*- import heapq nums = [1, 8, 2, 23, 7, -4, 18, 23, 24, 37, 2] # 最大的3个数的索引 max_ ...

  3. git log 详解 以及代码量统计

    https://git-scm.com/book/zh/v1/Git-%E5%9F%BA%E7%A1%80-%E6%9F%A5%E7%9C%8B%E6%8F%90%E4%BA%A4%E5%8E%86% ...

  4. Github使用进阶

    1 Github常用词: watch:会持续收到该项目的动态 fork:复制某个项目到自己的Github仓库中 star:可以理解为点赞 clone:将项目下载至本地 follow:关注你感兴趣的作者 ...

  5. osi7层模型及线程和进程

    端口的作用: 在同一台电脑上,为了让不同 的程序分离开来! http:网站默认端口是80 https:网站默认端口是443 osi七层模型: 1.应用层:软件 2.表示层:接收数据 3.会话:保持登录 ...

  6. springboot创建拦截器

    一.创建一个MyIntercepor实现HandlerInterceptor接口的类             二.创建一个WebMvcConfig实现WebMvcConfigurer的类       ...

  7. HTML中的marquee标签实现滚动效果

    一.标签<marquee>简介 通过开始标签<marquee>和结束标签</marquee>的共同配合而实现滚动效果,<marquee>滚动的内容< ...

  8. ViewContainerRef 动态创建视图

    Angular DOM 操作 相关的APIs和类: 查询DOM节点 template variable ref: 模版变量引用,相当于react中的ref ViewChild: 查询DOM,返回单个元 ...

  9. 可用来修改bean对象的BeanPostProcessor

    可用来修改bean对象的BeanPostProcessor 11.1 简介 BeanPostProcessor是Spring中定义的一个接口,其与之前介绍的InitializingBean和Dispo ...

  10. Spring Cloud架构教程 （七）消息驱动的微服务（核心概念）【Dalston版】

    下图是官方文档中对于Spring Cloud Stream应用模型的结构图.从中我们可以看到,Spring Cloud Stream构建的应用程序与消息中间件之间是通过绑定器Binder相关联的,绑定 ...