版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_29173167/article/details/80831830
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基于vue2.0分页</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
<style>
.margin {
margin-top: 100px;
}
</style>
</head>
<body>
<footer class="margin ">
<ul class="am-pagination am-pagination-centered">
<li>当前活跃页数:{{currentPage}}</li>
<br>
<li>页码个数限制:{{pageNums}}</li>
<br>
<li>总页数:{{totalPages}}</li>
</ul>
<ul class="am-pagination am-pagination-centered">
<li :class="[currentPage <= 1 ? 'am-disabled' : '']">
<a @click="prevBtnClick">« Prev</a>
</li>
<li v-for="(value,index) in pages()" :class="[index + startPage == currentPage? 'am-active' : '']" v-if="startPage + index <= totalPages">
<a @click="pageBtnClick(index + startPage)">{{ index + startPage }}</a>
</li>
<li :class="[currentPage >= totalPages? 'am-disabled' : '']">
<a @click="nextBtnClick">Next »</a>
</li>
</ul>
</footer>
<script type="text/javascript">
var footer = new Vue({
el: 'footer',
data: {
startPage: 1, //开始页数
currentPage: 1, //当前页数
totalPages: 0, // 服务器获取的分页数
pageNums: 5, //页码个数限制
},
methods: {
pages: function () {
if (this.totalPages >= this.pageNums) {
return new Array(this.pageNums)
} else if (this.totalPages < this.pageNums) {
return new Array(this.totalPages)
}
},
prevBtnClick: function () {
if (this.currentPage <= 1) return;
this.currentPage--;
if (this.currentPage > 1 && this.currentPage < this.startPage) {
this.startPage -= this.pageNums;
}
},
nextBtnClick: function () {
if (this.currentPage > this.totalPages) return;
this.currentPage++;
if (this.currentPage >= this.startPage + this.pageNums) {
this.startPage += this.pageNums;
}
},
pageBtnClick: function (page) {
this.currentPage = page;
// 点击某一页,渲染、操作等等
}
},
mounted() {
// ajax()获取总页数
this.totalPages = 14;
}
})
</script>
</body>
</html>