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

<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 ;
        },
        
    }

最后我们来一张效果图:

vue实现分页功能jiexi_当前页