vue 基于v-for限制简单的分页

前言

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

常见分页

拆分结构

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

实现目标

点击默认一半

页数到尾

分页结构

基础样式

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
            }   
        })
    }