一款简单实用的vue分页插件代码,该有的分页功能都有,当前页红底白字突出显示。
js代码
<script src="js/vue.min.js"></script>
<script>
var newlist = new Vue({
el: '#app',
data: {
current_page: 1, //当前页
pages: 50, //总页数
changePage: '', //跳转页
nowIndex: 0
},
computed: {
// ...是否禁用上一页
show: function () {
return this.pages && this.pages != 1
},
// 开始
starts: function () {
return this.current_page == 1;
},
ends: function () {
return this.current_page == this.pages;
},
// ...
efont: function () {
if (this.pages <= 7) return false;
return this.current_page > 5
},
// 是否大于7
ebehind: function () {
if (this.pages <= 7) return false;
var nowAy = this.indexs;
return nowAy[nowAy.length - 1] != this.pages;
},
indexs: function () {
var left = 1,
right = this.pages,
ar = [];
if (this.pages >= 7) {
if (this.current_page > 5 && this.current_page < this.pages - 4) {
left = Number(this.current_page) - 2;
right = Number(this.current_page) + 2;
} else {
if (this.current_page <= 5) {
left = 1;
right = 7;
} else {
right = this.pages;
left = this.pages - 6;
}
}
}
while (left <= right) {
ar.push(left);
left++;
}
return ar;
},
},
methods: {
jumpPage: function (id) {
this.current_page = id;
},
},
})
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791