<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{display:inline-block;margin:0 5px;height:20px;color:#666;background:#eee;text-decoration:none;padding:0 10px;text-align:center;line-height:20px;background:#ccc}
a.active{background:#008B8B;color:#fff}
</style>
</head>
<body>
<div id="app">
<page-component :pageCount="page.pageCount" :pagesize="page.pageSize" :pageIndex="page.pageIndex" @getdata='getData' @get="getPage"></page-component>
</div>
</body>
<script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
Vue.component('page-component',{
props:['pagecount','pageindex','pagesize'],
data () {
return {
current:this.pageindex,
showItem:this.pagesize,
allPage:this.pagecount
}
},
template:`
<div class="page">
<a href="javascript:" v-show="current != 1" @click="current-- && goto(current)">上一页</a>
<a href="javascript:" v-for="index in pages" :class="{active:(index == current)}" @click="goto(index)" :key="index">{{index}}</a>
<a href="javascript:" v-show="current != allPage && allPage!= 0" @click="current++ && goto(current)">下一页</a>
</div>
`,
computed:{
pages:function(){
var pag = [];
if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var i = Math.min(this.showItem,this.allPage);
while(i){
pag.unshift(i--);
}
}
else
{ //当前页数大于显示页数了
var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
i = this.showItem;
if( middle > (this.allPage - this.showItem) ){
middle = (this.allPage - this.showItem) + 1
}
while(i--){
pag.push( middle++ );
}
}
return pag
}
},
methods:{
goto:function(index){
this.current =index;
this.$emit('get',index)
this.$emit('getdata')
}
}
});

new Vue({
el:'#app',
data:{
page:{
pageCount:10, //总页数
pageIndex:1, //默认页
pageSize:5 //每次显示页数
}
},
methods:{
getPage:function(inx){
this.page.pageIndex = inx;
},
getData:function(){
alert("这里面写请求第"+this.page.pageIndex+"页数据");

//这里面执行ajax请求的分页信息
}
}
})
</script>
</html>

VUE 分页组件的更多相关文章

  1. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  2. java+springBoot+Thymeleaf+vue分页组件的定义

    导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...

  3. vue分页组件table-pagebar

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...

  4. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  5. vue分页组件重置到首页问题

    分页组件,可以借用这个老哥的@暴脾气大大https://www.cnblogs.com/sebastian-tyd/p/7853188.html#4163272 但是有一个问题就是下面评论中@ Mrz ...

  6. vue分页组件二次封装---每页请求特定数据

    关键步骤: 1.传两个参数:pageCount (每页条数).pageIndex (页码数): 2.bind方法的调用 <!-- 这部分是分页 --> <div class=&quo ...

  7. vue分页组件

    <template> <div> <ul class="pagination"> <li @click="goTo(1)&quo ...

  8. vue分页组件火狐中出现样式问题

    分页的操作到了火狐浏览器会样式 怎么解决? 其实就是将input的type属性变成了text,因为number属性会变成上下的小箭头

  9. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

随机推荐

  1. Python教程(2.2)——数据类型与变量

    和C/C++.Java一样,Python也有数据类型和变量两个概念. 数据类型 Python中的几个基本数据类型为整数(integer/int).浮点数(float/float).布尔值(boolea ...

  2. Maximum Subarray Sum

    Maximum Subarray Sum 题意 给你一个大小为N的数组和另外一个整数M.你的目标是找到每个子数组的和对M取余数的最大值.子数组是指原数组的任意连续元素的子集. 分析 参考 求出前缀和, ...

  3. Python中lambda用法

    lambda只是一个表达式,函数体比def简单很多. lambda的主体是一个表达式,而不是一个代码块.仅仅能在lambda表达式中封装有限的逻辑进去. lambda表达式是起到一个函数速写的作用.允 ...

  4. 架构师之路--应用架构的选型和dubbo

    这个选型主要决定于系统复杂度.先回顾一下. 1>单一应用架构:对于一个流量很小的网站来说,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本.之前在上家公司做过一个微信公众号的开发就是基 ...

  5. Unity应用架构设计(11)——一个网络层的构建

    对于客户端应用程序,免不了和远程服务打交道.设计一个良好的『服务层』能帮我们规范和分离业务代码,提高生产效率.服务层最核心的模块一定是怎样发送请求,虽然Mono提供了很多C#网络请求类,诸如WebCl ...

  6. sock

    头和尾基本用来做校验, 不是拿来做边界的. 头+类型+长度+数据+尾, 这种结构就可以. 拆包就是: 检验头, 然后拆出类型+长度, 然后根据长度拆数据, 然后检验尾巴.

  7. 在WIN SERVER 2016上安装DOCKER（带过坑）

    目录 1    概要    1 1.1    主要优势    1 2    在Windows Server上部署Docker    2 概要 博客使用Word发博,发布后,排版会出现很多问题,敬请谅解 ...

  8. Java NIO学习笔记六 SocketChannel 和 ServerSocketChannel

    Java NIO SocketChannel Java NIO SocketChannel是连接到TCP网络socket(套接字)的通道.Java NIO相当于Java Networking的sock ...

  9. Linux命令 文件压缩及压缩命令

    gzip [功能说明] 文件的压缩 #gizp属于GNU软件,总性能不错,是Linux系统首选的压缩工具,tar归档命令的-z参数也是利用gzip/gunzip来解压缩 [语法格式] Gip[选项][ ...

  10. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...