基于vue2.0的一个分页组件
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。于是百度发现几篇文章介绍的实在方式有点复杂，
没耐心看自己动手造轮子写了一个，用vue的计算属性去实现真正的逻辑代码大约在20行左右相当好理解现实原理简单没什么好介绍的直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-router</title>
<script src="./vue.js" ></script>
<style>
body{
font-family:"Segoe UI";
}
li{
list-style:none;
}
a{
text-decoration:none;
}
.pagination {
position: relative;
}
.pagination li{
display: inline-block;
margin:0 5px;
}
.pagination li a{
padding:.5rem 1rem;
display:inline-block;
border:1px solid #ddd;
background:#fff;
color:#0E90D2;
}
.pagination li a:hover{
background:#eee;
}
.pagination li.active a{
background:#0E90D2;
color:#fff;
}
</style>
</head>
<body>
<script type="text/x-template" id="page">
<ul class="pagination" >
<li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
<a href="#" >{{index}}</a>
</li>
<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
</ul>
</script>
<div id="app">
<page></page>
</div>
<script>
Vue.component("page",{
template:"#page",
data:function(){
return{
current:1,
showItem:5,
allpage:13
}
},
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){
if(index == this.current) return;
this.current = index;
//这里可以发送ajax请求
}
}
})
var vm = new Vue({
el:'#app',
})
</script>
</body>
</html>
基于vue2.0的一个分页组件的更多相关文章
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
- 基于vue2.0的一个系统
前言 这是一个用vue做的单页面管理系统,这里只是介绍架子搭建思路 前端架构 沿用Vue全家桶系列开发,主要技术栈:vue2.x+vue-router+vuex+element-ui1.x+axios ...
- 基于vue2.0的分页组件开发
今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
- 一款基于vue2.0的分页组件---写在页面内
通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 .p ...
- 采用Vue2.0开发的分页js组件
2017-11-17 19:14:23 基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js 由于项目需求,要求使用 Vue2.0 开 ...
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...
- 基于vue2.0实现仿百度前端分页效果（二）
前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...
- 基于vue2.0实现仿百度前端分页效果（一）
前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...
- 基于Vue的简单通用分页组件
分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...
随机推荐
- 关闭显卡快捷键 CTRL+ALT+方向键
eclipse中的CTRL+ALT+方向键 会和电脑的快捷键进行冲突,按照以下的方法就可以解决了 打开控制面板,找到“显示”(图中圈划的),点击进入 找到”更改显示器设置“,点击进入 ...
- 通过AJAX和PHP，提交JQuery Mobile表单
File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...
- .C .h 和 .CCP的区别
1.*.H:C语言规定使用一个变量或调用一个函数前必须声明,为了使用方便,经常把常用函数,例如Windows API的函数,MFC类写入头文件.h,这样每次需要引用时只要使用#include加入就可以 ...
- codeforces 335A Banana(贪心)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Banana Piegirl is buying stickers for ...
- UVA11361 Investigating Div-Sum Property（数位dp）
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud 题目意思:问在区间[A,B]有多少个数不仅满足自身是k的倍数,而且其各个位数上的和 ...
- TCP的状态
在TCP层,有个FLAGS字段,这个字段有以下几个标识:SYN, FIN, ACK, PSH, RST, URG. 其中,对于我们日常的分析有用的就是前面的五个字段. 它们的含义是: SYN表示建立连 ...
- MySql存储引擎介绍
MySQL5.5以后默认使用InnoDB存储引擎,其中InnoDB和BDB提供事务安全表,其它存储引擎都是非事务安全表.若要修改默认引擎,可以修改配置文件中的default-storage-engin ...
- [Head First Python]6. summary
1- 字典-内置数据结构,数据值与键值关联 键-字典中查找部分 值-字典中数据部分 使用dict()工厂函数或者只用{}可以创建一个空字典 >>> list = {} >> ...
- 典型的DIV CSS三行二列居中高度自适应布局
如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...
- innobackupex 使用说明
1.创建备份相关用户 '; grant reload,lock tables,replication client,process,super on *.* to 'backuper'@'127.0. ...