本文主要给大家介绍基于vue的分页原生写法，代码分为html部分和js部分，简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
本文主要介绍基于vue的分页原生写法。
先po上效果图：
html部分，将page作为一个单独的组件
<script type="text/x-template" id="page">
<ul class="pagination">
<li v-show="current != 1" @click="current-- && goto(current)">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a>
</li>
<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{index}}</a>
</li>
<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a>
</li>
</ul>
</script>
<p id="app">
<page></page>
</p>js部分：
<script>
Vue.component("page", {
template: "#page",
data: function () {
return {
current: 1, // 当前页码
showItem: 5, // 最少显示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>css部分：
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;
}上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Angular中使用better-scroll插件的方法_AngularJS
以上是基于vue.js实现的分页的详细内容。更多信息请关注PHP中文网其他相关文章！
