在php中用vue写分页,Vue实现web分页组件

效果演示

源代码

测试分页 - www.maoyupeng.com

body{padding:0; margin: 0; broder:none; } #app {width: 500px; height: 200px; margin: 0 auto; text-align: center; background-color: #cccccc; } #mylink {color: #efefef; } .pagination{list-style: none; text-align: center; height: 50px; padding-top: 50px; } .pagination > li {float: left; margin: 0 5px; } [v-cloak] {display: none; }

• 首页

  首页

• 上一页
• 上一页

• {{item.key}}

  {{item.key}}

• 下一页
• 下一页

• 尾页

  尾页

共:{{totalPageCount||0}}页,当前页为第{{currentPage||0}}页   设置总页数:

http://www.maoyupeng.com 带注解版本

var app = new Vue({

el: '#app',

data: {

// 省略的符号

sign:'...',

// 省略号位置

signIndex:4,

// 总页数

totalPageCount: 4,

// 当前页

currentPage:1,

// 显示在页面的数组列表

pagingList:[]

},

watch: {

totalPageCount (val) {

var that = this

if (!val || val == '') return;

that.currentPage = 1;

that.init()

},

currentPage (val) {

var that = this

that.init()

}

},

methods: {

// 跳转到某页码

next (num) {

var that = this

if (num <= 1) that.currentPage = 1;

else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;

else that.currentPage = num;

},

// 初始化数据

fetchData () {

var that = this

that.pagingList = [];

var tmp = null;

if ((that.totalPageCount) > 6) {

if (((that.totalPageCount-1) == (that.totalPageCount - that.currentPage)) && (that.totalPageCount - that.currentPage) > 5) {

for (var i=1;i<7;i++) {

if (i < that.signIndex) {

tmp = {key:i, value:i }

} else if (i== that.signIndex) {

tmp = {key:that.sign, value:0 }

} else if (i == (that.signIndex + 1) ) {

tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }

} else {

tmp = {key:that.totalPageCount, value:that.totalPageCount }

}

that.pagingList.push(tmp)

}

} else if (((that.totalPageCount - that.currentPage) <= that.signIndex)){

var starNum = that.totalPageCount - 5;

for (var i=starNum;i

tmp = {key:i, value:i }

that.pagingList.push(tmp)

}

} else {

var starNum = that.currentPage - 1;

for (var i=1;i<7;i++) {

if (i < that.signIndex) {

tmp = {key:(starNum - 1) + i, value:(starNum - 1) + i }

} else if (i== that.signIndex) {

tmp = {key:that.sign, value:0 }

} else if (i == (that.signIndex + 1) ) {

tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }

} else {

tmp = {key:that.totalPageCount, value:that.totalPageCount }

}

that.pagingList.push(tmp)

}

}

} else {

for (var i =0; i

tmp = {key:i+1, value:i+1 }

that.pagingList.push(tmp)

}

}

},

init () {

var that = this

that.fetchData()

}

},

mounted () {

var that = this

that.init()

}

})