基于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的简单通用分页组件
分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...
随机推荐
- Android ---------- 清单文件中Activity常规设置
<activity android:name="xxxxx" android:alwaysRetainTaskState="true" android:c ...
- [转] SQL Server游标的使用
游标是邪恶的! 在关系数据库中,我们对于查询的思考是面向集合的.而游标打破了这一规则,游标使得我们思考方式变为逐行进行.对于类C的开发人员来着,这样的思考方式会更加舒服. ...
- （转）ubuntu下如何查看和设置分辨率
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5681159.html 原网址: http://www.2cto.com/os/201303/19397 ...
- （原）Vs中debug和release结果不一致
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5598091.html 前两天调试程序,出现了一个很蛋疼的问题,debug和release结果不一致.网 ...
- Get Start StrangeIOC for Unity3D
好久没有发blog了,因为只发原创内容,而去年发布的那几篇后来发现随便百度到处都是转载的或者各种网站自动扒的,我觉得既然大家都不尊重这种东西就没必要发上来了!不过由于工作原因最近在看Unity的一个I ...
- JavaScript权威指南阅读笔记3
第六章 对象 1.首先是先介绍了对象直接量的格式:对象直接量就是1.由若干个名/值对组成的映射表,2名/值对中间由冒号分割,3名值对之间由逗号分割,4整个映射表由花括号括起来.这样就组成了一个对象直接 ...
- mac下 WebStorm下主题包安装
mac下: 主题包 1.mac下,点击桌面,使用shift+command+G 输入:~/Library/Preferences 前往(mac查找安装目录的方法,因为默认这些文件夹是隐藏的),进入We ...
- python快速搭建WebServer
#!/usr/bin/python import SimpleHTTPServer import SocketServer import os PORT = 7777 WEBDIR = "/ ...
- Python爬虫学习：四、headers和data的获取
之前在学习爬虫时,偶尔会遇到一些问题是有些网站需要登录后才能爬取内容,有的网站会识别是否是由浏览器发出的请求. 一.headers的获取 就以博客园的首页为例:http://www.cnblogs.c ...
- 用Python写的简单脚本更新本地hosts
这两天Google墙得严重,于是就产生了做个一键更新hosts的脚本的想法. 由于正在学习Python,理所当然用Python来写这个脚本了. 接触比较多的就是urllib2这个库,习惯性的impor ...