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

首先我们从豆瓣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. python:实例属性和类属性

    由于Python是动态语言,根据类创建的实例可以任意绑定属性. 给实例绑定属性的方法是通过实例变量,或者通过self变量: class Student(object): def __init__(se ...

  2. web页面调用app的方法

    use_app_goto_page: (skip_type, skip_target) => { // Android App if (/android/i.test(navigator.use ...

  3. django之表单类

    一:表单类 一般我们在html中自己写的表单类似于下面的样子 <!DOCTYPE html> <html lang="en"> <head> & ...

  4. 字符编码、python2和python3编码的区别

    目录 字符编码 文本编辑器存储信息的过程 python解释器解释python代码的流程 python解释器与文本编辑器的异同 不同编码格式存入与读取数据的过程 乱码的分析 python2和python ...

  5. 大数加法(A + B Problem Plus)问题

    解题思路 两个⼤数可以⽤数组来逐位保存,然后在数组中逐位进⾏相加,再判断该位相加后是否需要进位.为了⽅便计算,可以把数字的低位放到数组的前面,高位放在后面. 样例输入 3 18 22 56 744 5 ...

  6. Spring5最新完整教程IDEA版【通俗易懂2019.11月】

    1.Maven找包: spring-webmvc spring-jdbc 2.Spring的本质是控制反转,依靠依赖注入来实现.以一个servcie对象为例,即是service暴露注入接口(构造,se ...

  7. css-按钮中有图片和文字，怎么才能让文字和图片都中？？

    <div class="btn1 trans" > <img src="../../images/img/add.png"/> < ...

  8. 基于函数计算 + TensorFlow 的 Serverless AI 推理

    前言概述 本文介绍了使用函数计算部署深度学习 AI 推理的最佳实践, 其中包括使用 FUN 工具一键部署安装第三方依赖.一键部署.本地调试以及压测评估, 全方位展现函数计算的开发敏捷特性.自动弹性伸缩 ...

  9. 查看windosw服务器型号和序列号

    查看服务器型号 wmic csproduct get name 查看序列号 wmic bios get serialnumber 查看内存 wmic memorychip list brief === ...

  10. 在centos上配置环境

    1.   安装wget [root@localhost ~]# yum -y install wget 2.   在oneinstack官网配置安装环境 wget http://mirrors.lin ...