之前的CSDN编译器有点问题。所以这里重新整理给大家。
本文主要介绍基于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="#">上一页</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>
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;
}
最后附上github地址:https://github.com/AmberWuWu/vue-page