小程序代码大全_Vue完成web分页组件详解

Vue实现web分页组件详解       这篇文章主要为大家详细介绍了Vue实现web分页组件的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue实现web分页组件的具体代码,供大家参考,具体内容如下

效果演示

源代码

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 测试分页 -  /title 
 style type="text/css" 
 body{padding:0; margin: 0; broder:none; } #app {width: 500px; height: 200px; margin: 0 auto; text-align: center; background-color: #; } #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; } /style 
 /head 
 body 
 div id="app" v-cloak 
 a v-if="currentPage == 1" 首页 /a 
 a v-else href="javascript:;" @click="next(1)" 首页 /a 
 /li 
 li v-if="currentPage =1" a 上一页 /a /li 
 li v-else a href="javascript:;" @click="next(currentPage-1)" 上一页 /a /li 

li v-for="item in pagingList" a v-if="currentPage==item.key || sign ==item.key" {{item.key}} /a a v-else href="javascript:;" @click="next(item.value)" {{item.key}} /a /li li v-if="currentPage =totalPageCount" a 下一页 /a /li li v-else a href="javascript:;" @click="next(currentPage+1)" 下一页 /a /li a v-if="totalPageCount == currentPage" /a a v-else href="javascript:;" @click="next(totalPageCount)" /a /li /ul p 共:{{totalPageCount||0}}页,当前页为第{{currentPage||0}}页 nbsp; nbsp; nbsp;设置总页数: input v-model="totalPageCount" /p " target="_blank" id="mylink" a /div script src="vue/dist/vue.js" /script script type="text/javascript" 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 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 starNum+6;i++) { tmp = {key:i, value:i } that.pagingList.push(tmp) } else { var starNum = that.currentPage - 1; for (var i=1;i 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 that.totalPageCount; i++) { tmp = {key:i+1, value:i+1 } that.pagingList.push(tmp) init () { var that = this that.fetchData() mounted () { var that = this that.init() /script /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



扫描二维码分享到微信