<!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. Java经典编程题50道之二十

    有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这个数列的前20项之和. public class Example20 {    public static void ma ...

  2. C#实现SQLSERVER数据库中有序GUID生成（NewSequentialId）

    GUID作为数据库主键由于其无序性所以性能不怎么好,SQL Server中有个函数NewSequentialId可以生成有序的GUID,由于在程序中需要用到,就用C#实现了一下,生成的GUID格式基本 ...

  3. PHP中的面向对象OOP中的魔术方法

    一.什么是魔术方法: PHP为我们提供了一系列用__开头的函数,这些函数无需自己手动调用,会在合适的时机自动调用,这类函数称为魔术函数.例如: function __construct(){} 在ne ...

  4. 排序算法 - 选择排序(selection sort)

    选择排序(Selection sort)跟插入排序一样,也是O(n^2)的复杂度,这个排序方式也可以用我们的扑克牌来解释. 概念 桌面上有一堆牌,也是杂乱无章的,现在我们想将牌由小到大排序,如果使用选 ...

  5. javascript中 __proto__与prorotype的理解

    我们先看看这样一段代码: <script type="text/javascript"> var Person = function () { }; var p = n ...

  6. AngularJS高级程序设计读书笔记 -- 控制器篇

    作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...

  7. 深入理解PHP对象注入

    0x00 背景 php对象注入是一个非常常见的漏洞,这个类型的漏洞虽然有些难以利用,但仍旧非常危险,为了理解这个漏洞,请读者具备基础的php知识. 0x01 漏洞案例 如果你觉得这是个渣渣洞,那么请看 ...

  8. AutoResetEvent类的使用

    线程通过调用 AutoResetEvent 上的 WaitOne 来等待信号.如果 AutoResetEvent 处于非终止状态,则该线程阻塞,并等待当前控制资源的线程通过调用 Set 发出资源可用的 ...

  9. WCF学习——构建第二个WCF应用程序（四）

    一.WCF服务端应用程序 1.创建WCF服务端应用程序项目 打开Visual Studio 2013,在菜单上点击文件->新建->项目->WCF服务应用程序.在弹出界面的" ...

  10. cURL的运用,文字替换

    <?php /** * 实例描述:在网络上下载一个网页并把内容中的“百度”替换为“谷歌”之后输出 */ $curl_obj = curl_init(); // 初始化 curl_setopt($ ...