vue.js 分页
<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 分页的更多相关文章
- vue.js 分页加载,向上滑动,依次加载数据。
export default { layout: 'default', data(){ return{ page:1, pageSize:10, orderListArr:[], prodListLo ...
- html+vue.js 实现分页可兼容IE
当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- JS(vue iview)分页解决方案
JS(vue iview)分页解决方案 一.解决思路 使用分页组件 使用组件API使组件自动生成页面数量 调用组件on-change事件的返回值page 将交互获得的数组存在一个数组list中 通过p ...
- 用vue.js的v-for,v-if,computed写一个分页样式
在学Vue,总想写个分页,先写了一个样式. 主要看思路: 思路简单,得到总页数,判断总页数,循环. 先判断总页数是否需要分页,总页数==1页就不分了. 再判断总页数<11就不用--. 总页数&g ...
- Vue.js 开发实践:实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
随机推荐
- vagrant(一)初识与安装
链接:https://pan.baidu.com/s/1I2RNMNq9G-P4k42-U1Jjtw (这里有需要准备的安装包以及镜像文件,也可自己去官网下载)提取码:jis8 安装VirtualBo ...
- php获取linux服务器CPU、内存、硬盘使用率的实现代码
define("MONITORED_IP", "172.16.0.191"); //被监控的服务器IP地址 也就是本机地址 define("DB_SE ...
- 7 August
P1021 邮票面值设计 暴搜各面值. 剪枝1:面值递增,新面值 \(\in[G_{i-1}+1, n\cdot sum]\). 为什么上界不是 \(n\cdot G_{i-1}+1\) 呢? 剪枝2 ...
- 转载:eclipse中web项目小地球没了
转载自:{FROM:http://www.cnblogs.com/zhouyalei/archive/2013/01/30/2882651.html} MyEclipse下创建的项目 导入eclips ...
- 多列布局(column)
容器的属性 column-width: auto | < length > .给列定义一个最小宽度(min-width). auto: 列宽由其他元素决定. length: 显式设置最小宽 ...
- python数据储存
python数据储存 csv文件的操作 安装csv包打开cmd 执行 pip install csv引入的模块名为csv 读取文件 with open("xx.csv"," ...
- 命令连接redis
cd到redis的bin目录 ./redis-cli -h 输入info,看是否要验证 清空所有key FLUSHALL
- 如何为mysql建立索引
前些时候,一位颇高级的程序员居然问我什么叫做索引,令我感到十分的惊奇,我想这绝不会是沧海一粟,因为有成千上万的开发者(可能大部分是使用MySQL的)都没有受过有关数据库的正规培训,尽管他们都为客户做过 ...
- 《JavaScript DOM 编程艺术》学习成果
(在线演示地址)[http://thqy39.github.io/works/03.Js%20DOM%20website/index.html]
- 一步一步学Vue(九) 路由元数据
一步一步学Vue(九):https://www.cnblogs.com/Johnzhang/p/7260888.html