基于vue.js实现的分页
发布时间：2020-12-17 02:30:57 所属栏目：百科 来源：网络整理
导读：本文主要介绍基于vue的分页原生写法。 先po上效果图： html部分，将page作为一个单独的组件 js部分： css部分： 最后附上github地址： 总结 以上所述是小编给大家介绍的基于vue.js实现的分页。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得
|
本文主要介绍基于vue的分页原生写法。 先po上效果图：
html部分，将page作为一个单独的组件 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地址： 总结以上所述是小编给大家介绍的基于vue.js实现的分页。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
