前言

vue框架的v-for很适合用来渲染数据模板，但是并没有提供开始和结束的位置限制，一般需要进行条件限制的话可以用v-if进行控制渲染。比如网页常见的分页功能，默认需要展示5页，点击页数持续往后面移动，大于默认一般即2+1+2时居中高亮，总页数暂定为all。

常见分页

拆分结构

设定当前页为current，总页数为all，默认展示5页数（奇数适合对称），当前页用checked高亮，如下所示。小于5的时候需要页数渲染满5页，大于5页的时候隐去前2个和展示后2个，比较简单，但是能实现v-for循环的限制。

实现目标

点击默认一半

页数到尾

分页结构

<template>
  <li v-for="index in all"  @click="page(index)" :key="index" v-if="current-2<=index&&index<=(current+2<5?5:current+2)">
        <router-link :to="''"  :class="{'checked':index==current}">{{index}}</router-link>
  </li>
</template>
<script>

</script>

基础样式

<style lang="scss">
//基于ydui rem
.pagination {
        margin:.24rem 0;
        font-size:.18rem;
        ul {
              display:flex;
              justify-content: center;
              align-items: center;
            li {
                a{
                    display:block;
                    cursor: pointer;
                    padding:.15rem .25rem;
                    border-radius:5px;
                }
                .checked {
                    background:#64a281;
                    color:#fff;
                }
            }
        }
    }
</style>

js模块

methods: {
    pre() {
        this.$store.state.current--;
        this.$router.push({path:'videolist',query:{
                page:this.$store.state.current
            }   
        })
    },
    next() {
        this.$store.state.current++;
        this.$router.push({path:'videolist',query:{
                page:this.$store.state.current
            }   
        })
    },
    page(index) {
        this.$store.state.current=index;
        // 跳转页面
        this.$router.push({path:'videolist',query:{
                page:this.$store.state.current
            }   
        })
    }