Vue项目中常见问题(30)分页器动态展示

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

步骤:

 发现问题1:

 发现问题2:

 发现问题3:

 发现问题4:

 发现问题5:

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

分页器动态展示

我们可以先把分页器的结构氛围上中下 [中间部分]

v-for可以遍历数组|数字|字符串|对象

步骤:

我们先对中间部分进行操作

我们在pages/search/index.vue中的数据是这样的

在components/Pagination中

我们利用v-for遍历中间的数字,我们的当前页面定为8,分页连续页码个数为5

startNumAndEndNum.end是10

效果:

我们发现遍历是从1-10都遍历了,然而我们只要6-10这5个连续页码

所以我们利用v-if来进行显示与隐藏

page中包含了1-10,我们判断page如果>=startNumAndEndNum.start为6,就是true,那么就显示,

小于6的都隐藏了,我们在利用插值语法{ {page}}把显示的6-10这5个连续页码的数字放到页面中

 效果:

<