本文主要介绍基于vue的分页原生写法。
先po上效果图：
html部分，将page作为一个单独的组件
上一页
{{index}}
下一页
js部分：
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',})
css部分：
最后附上github地址：nofollow" href="https://github.com/AmberWuWu/vue-page">https://github.com/AmberWuWu/vue-page
总结
以上所述是小编给大家介绍的基于vue.js实现的分页。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/33228.html