先来看两张效果图： 
接下来看看实现代码：
1.组件代码：由于是一个组件所以就简单粗暴的全部写在一个页面了
Pagination.vue
<!--
params:
pageNo: 总页数
current: 当前的页码
-->
<template>
<div class="pager">
<select class="select-page" @change="selectPage()">
<option value="10">每页10条</option>
<option value="15">每页15条</option>
<option value="20">每页20条</option>
</select>
<div class="page-right">
<button class="btn btn-pager" :disabled="currentNow == 1" @click="prePage">
<span aria-hidden="true"><i class="fa fa-angle-left"></i></span>
</button>
<span v-if="pageAll !== 1" class="page-index" v-bind:class="{'active':1 == currentNow}" @click="goPage(1)">1</span>
<span v-if="preClipped" class="page-index">...</span>
<span v-for="index in pages" class="page-index" v-bind:class="{'active':index == currentNow}" @click="goPage(index)">{{index}}</span>
<span v-if="backClipped" class="page-index">...</span>
<span class="page-index" v-bind:class="{'active':pageAll == currentNow}" @click="goPage(pageAll)">{{pageAll}}</span>
<button class="btn btn-pager" :disabled="currentNow == pageAll" @click="nextPage">
<span aria-hidden="true"><i class="fa fa-angle-right"></i></span>
</button>
</div>
</div>
</template>
<script type="es6">
export default {
name:'page',
props: {
// 用于记录总页码，可由父组件传过来
pageNo: {
type: Number,
default: 1
},
// 用于记录当前页数，这个与父组件进行数据交互来完成每一页的数据更新，所以我们只要改变current的值来控制整个页面的数据即可
current: {
type: Number,
default: 1
}
},
data: function () {
return {
// 用于判断省略号是否显示
backClipped: true,
preClipped: false,
//通过这种方法处理从父组件传来的参数
currentNow:this.current,
pageAll:this.pageNo/10,
pageAll1:this.pageNo
}
},
methods: {
selectPage(){
this.pageAll = parseInt(this.pageAll1/$('.select-page').val());
if(this.currentNow > this.pageAll){
this.currentNow = this.pageAll
}
},
prePage () {
// 上一页
this.currentNow--
},
nextPage () {
// 下一页
this.currentNow++
},
goPage (index) {
// 跳转到相应页面
if (index !== this.currentNow) {
this.currentNow = index
}
}
},
computed: {
// 使用计算属性来得到每次应该显示的页码
pages: function () {
let ret = []
if (this.currentNow > 3) {
// 当前页码大于三时，显示当前页码的前2个
ret.push(this.currentNow - 2)
ret.push(this.currentNow - 1)
if (this.currentNow > 4) {
// 当前页与第一页差距4以上时显示省略号
this.preClipped = true
}
} else {
this.preClipped = false
for (let i = 2; i < this.currentNow; i++) {
ret.push(i)
}
}
if (this.currentNow !== this.pageAll && this.currentNow !== 1) {
ret.push(this.currentNow)
}
if (this.currentNow < (this.pageAll - 2)) {
// 显示当前页码的后2个
ret.push(this.currentNow + 1)
ret.push(this.currentNow + 2)
if (this.currentNow <= (this.pageAll - 3)) {
//当前页与最后一页差距3以上时显示省略号
this.backClipped = true
}
} else {
this.backClipped = false
for (let i = (this.currentNow + 1); i < this.pageAll; i++) {
ret.push(i)
}
}
// 返回整个页码组
return ret
}
}
}
</script>
// 组件样式
<style scoped>
.pager {
text-align: center;
}
.select-page{
float: left;
padding: 0px;
margin-left: 31px;
width: 80px;
height: 24px;
text-align: center;
border:1px solid #CCCCCC;
color: #999999;
cursor:pointer;
}
.page-right{
float: right;
margin-right: 24px
}
.btn-pager {
margin-left: 10px;
padding: 0px;
width: 24px;
height: 24px;
text-align: center;
background-color: #ffffff;
color: #CCCCCC;
border: 1px solid #e3e3e3;
border-radius: 0px;
cursor:pointer;
}
.btn-pager:hover {
background-color: #f2f2f2;
}
.page-index {
display: inline-block;
margin-left: 4px;
width: 24px;
height: 24px;
line-height: 24px;
background-color: #ffffff;
cursor: pointer;
color: #000000;
}
.active {
color: #ffffff;
background-color: #FFA600;
}
</style>2.看配合父组件如何使用：
<page v-bind:page-no="1000" v-bind:current="5"></page>3.不要忘了引入和加载一些必要的文件及配置一下组件
components: {
page
}
import ‘./assets/css/font-awesome-4.7.0/css/font-awesome.min.css’
import $ from ‘jquery’
import page from ‘../../components/page/page’;
希望可以帮到用vue2.0的各位小白！！！