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,使得我们 ...
随机推荐
- spring-boot整合shiro实现权限管理
1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...
- dotnet 跨平台编译发布
dotnet publish 命令,bash脚本如下(Windows安装git即可建议sh关联) publish.sh #!/usr/bin/env bash # one line command: ...
- [NOIP2015]子串 题解
题目描述 有两个仅包含小写英文字母的字符串A和B. 现在要从字符串A中取出k个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一个新的字符串,请问有多少种方案可 ...
- Win7、Win10、Linux局域网文件共享
目录 1.WIN7系统局域网文件共享 2.WIN10系统局域网文件共享 3.Linux 局域网文件共享 WIN7系统局域网文件共享 步骤一: 打开网络和共享中心----更改高级共享设置 步骤二: 选择 ...
- QString的arg方法
第一个参数是要填充的数字,第二个参数为最小宽度,第三个参数为进制,第四个参数为当原始数字长度不足最小宽度时用于填充的字符,如 QString name=QString("R%1C%2&quo ...
- 记录规则(recording rules)与告警规则(alerting rule)
记录规则(recording rules) 配置规则 Prometheus支持两种类型的规则,可以对其进行配置,然后定期进行评估:记录规则和警报规则.要在Prometheus中包含规则,请创建一个包含 ...
- [题解]RGB Substring (hard version)-前缀和(codeforces 1196D2)
题目链接:https://codeforces.com/problemset/problem/1196/D2 题意: q 个询问,每个查询将给你一个由 n 个字符组成的字符串s,每个字符都是 “R”. ...
- Tomcat服务的配置
首先到Apache官网,下载tomcat,在官网有两种tomcat,一种是安装版,一种是压缩版,对于安装版的一台机器只能安装一个tomcat,而对于压缩版的tomcat一台机器可以安装多个tomcat ...
- Oracle数据库(一)--Oracle简介及安装
一.Oracle简介 Oracle是美国一家著名的软件公司,也是世界上排名前三的软件公司(微软,Oracle,Adobe).Oracle数据库是一个大型的关系型数据库,在一些大型的企业之中使用的会比较 ...
- Linux下实现客户端和服务器端的通信
首先,可以将代码复制下来放到U盘里,然后挂载到Linux上 挂载步骤 找到设备->USB->你U盘的名字 挂载成功 访问U盘把代码拷贝到home文件夹下,就可以直接进行编译. client ...