vue 限制渲染条数_vue 基于v-for限制简单的分页

前言

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

常见分页

拆分结构

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

实现目标

点击默认一半

页数到尾

分页结构

{{index}}

基础样式

//基于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;

}

}

}

}

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

}

})

}