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