<template>
<div class="index">
<el-pagination
background
:hide-on-single-page="true"
layout="total, prev, pager, next"
:current-page="currentPage"
:page-size="pageSize"
@current-change="handleCurrentChange"
:total="total">
</el-pagination>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
total: 126,
currentPage: 1,
pageSize: 3 // 每页显示的数量
}
},
created: {
},
methods: {
handleCurrentChange (currentPage) {
// 显示当前页数对应的数据
console.log('currentPage = ' + currentPage)
}
}
}
</script> <style> </style>

  

vue.js 分页的更多相关文章

  1. vue.js 分页加载,向上滑动,依次加载数据。

    export default { layout: 'default', data(){ return{ page:1, pageSize:10, orderListArr:[], prodListLo ...

  2. html+vue.js 实现分页可兼容IE

    当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...

  3. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  4. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  5. vue.js 2.0实现的简单分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. JS(vue iview)分页解决方案

    JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...

  7. 用vue.js的v-for,v-if,computed写一个分页样式

    在学Vue,总想写个分页,先写了一个样式. 主要看思路: 思路简单,得到总页数,判断总页数,循环. 先判断总页数是否需要分页,总页数==1页就不分了. 再判断总页数<11就不用--. 总页数&g ...

  8. Vue.js 开发实践:实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  9. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

随机推荐

  1. 初识Uniprot API

    Uniprot,全名Universal Protein,其整合了Swissprot.TrEMBL和PRI-PSD三大数据库,是目前使用非常广泛的蛋白质数据库 常规物种的蛋白质组学研究一般会使用Unip ...

  2. Vue-cli 项目设置每个页面标题

    页面标题 在vue-router页面配置中添加meta的title信息,配合vue-router的beforeEach注册一个前置守卫用户获取到页面配置的title const title = '移动 ...

  3. ubuntu软件源变更阿里源和arm板子变更国内源

    使用 lsb_release -c 命令,看看当前版本号,替换一下“bionic”字符 1.更改 /etc/apt/sources.list,更改之前先备份一下 deb http://mirrors. ...

  4. MySQL执行计划示例

    以上示例来自尚硅谷!

  5. springmvc的@ModelAttribute

    1:作用:执行任何方法前都要先执行一下有这个标识的方法. 用途:表单回显的时候先从数据库中查询出来放到这个方法中. 1):模拟表单 <form action="first/testMo ...

  6. 跨域共享cookie

    1. JSP中Cookie的读写 Cookie的本质是一个键值对,当浏览器访问web服务器的时候写入在客户端机器上,里面记录一些信息.Cookie还有一些附加信息,比如域名.有效时间.注释等等. 下面 ...

  7. 10.14 socket 网络编程

    简单的例子 socket客户端 import socket client = socket.socket() #声明socket类型,同时生成socket连接对象 client.connect(('l ...

  8. python中global的作用域

    #python引用变量的顺序: 当前作用域局部变量->外层作用域变量->当前模块中的全局变量->python内置变量 . ''' a=30 声明为全局变量 a=20 为test()函 ...

  9. jmeter添加自定义扩展函数之MD5加密

    1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...

  10. 对GridFS数据进行分片

    On this page files 集合 chunks 集合 在对 GridFS 存储进行分片时,需要注意以下的情况: files 集合 大多数情况下不需要对 files 集合进行分片,这个集合通常 ...