vue实现分页功能jiexi

首先我们先定义好分页效果

<div class="common-seo-page-box clearfix align-center assist">
    <ul class="page-center">
		<li v-if="currentPage>0"><a v-on:click="prePage">上一页</a></li>
		<li v-if="currentPage==0"><a class="banclick">上一页</a></li>
		<!-- 当前页背景色为蓝色 -->
		<li v-for="(item, index) in pageNum" :key="index"  v-bind:class="{ 'active':                                         currentPage == index}">
		<a v-on:click="toPage(index)">{{ index+1 }}</a>
		</li>
		<li v-if="currentPage<pageNum"><a v-on:click="nextPage">下一页</a></li>
		<li v-if="currentPage==pageNum"><a class="banclick">下一页</a></li>
		<li><a>共<i>{{pageNum}}</i>页</a></li>
	</ul>
</div>

css:

    .common-seo-page-box{
        padding-top: 19;
    }    
    .align-center{
        text-alogn: center;
    }
    .clearfix{
        z-index: 1;
    }
    li{
	    list-style: none
	}
	.common-seo-page-box li:first-child>a {
	   margin-left: 0px
	}
	.common-seo-page-box  .page-center{
		float: left;
		position: relative;
		left: 50%;
	}
	.common-seo-page-box li{
	    border: 1px solid #ddd;
	    text-decoration: none;
	    position: relative;
	    float: left;
		right: 50%;
	    padding: 6px 12px;
	    margin-left: -1px;
	    line-height: 1.42857143;
	    
	    cursor: pointer
	}
	.common-seo-page-box li:hover{
	    /* background-color: #eee; */
	}
	.common-seo-page-box li.banclick{
	    cursor:not-allowed;
	}
	.common-seo-page-box .active{
	    color: #fff;
	    cursor: default;
	    background-color: #337ab7;
	    border-color: #337ab7;
	}
	.common-seo-page-box .active a{
	    color: #fff;
	    /* cursor: default;
	    background-color: #337ab7;
	    border-color: #337ab7; */
	}
	.common-seo-page-box i{
	    font-style:normal;
	    color: #d44950;
	    margin: 0px 4px;
	    font-size: 12px;
	}

接下来就是重点: vue.js

export default{
	name: 'ListPage',
	data(){
		return {	
		    feasts: [],
            list_id: '',
			pageSize: 2,
			currentPage: 0
		}
	},
    mounted () {
		this.$axios.get(this.HOST + 'api/list/' + this.list_id)
		.then(res => {
			this.detailData(res.data)
		})
		.catch(error => {
			console.log(error)
		})
	},
    methods: {
		getid(){
			var id = this.$route.query.id
			this.list_id = id
		},
		detailData(data){
			// 过滤器
			var labels = []
				
			for (var i=0; i<data.labelsData.length; i++) {
				var labelsObj = {
					id: data.labelsData[i].id,
					title: data.labelsData[i].title,
					master: data.labelsData[i].master_img
				}
				labels.push(labelsObj)
			}
			this.feasts = labels
		},
		nextPage: function(){
			var vm = this;
			if (vm.currentPage == vm.pageNum - 1) return;
			vm.currentPage++;	 
		},
		prePage: function(){
			var vm = this;
			if (vm.currentPage == 0) return;
			vm.currentPage--;
				
		},
		toPage: function(page){
			var vm = this;
			vm.currentPage = page
		}
	},
	computed:{
		dataShow: function(){
			let start = this.currentPage*this.pageSize;
			let end = Math.min((this.currentPage+1)*this.pageSize, this.feasts.length)
			return this.feasts.slice(start, end)
		},
		pageNum: function(){
			return Math.ceil(this.feasts.length / this.pageSize) || 1 ;
		},
		
	}
        

最后我们来一张效果图: