上一节
动态显示数据
上一节获取到了由父组件传递过来的数据，也用计算属性计算出了该有的数据，下面就要渲染数据了
一、上一页和下一页的禁用
当当前页码等于1或者等于最后一页时，按钮禁用,样式和功能上都要禁用，disabled样式类都已经提前定义了，看less样式就行
<button
:disabled="myCurrentPage === 1"
:class="{disabled: myCurrentPage === 1}"
>
上一页
</button>
<button
:disabled="myCurrentPage === totalPage"
:class="{disabled: myCurrentPage === totalPage}"
>
下一页
</button>
二、动态渲染页码
有了end就可以使用v-for遍历end，这样生成的是从1开始生成到end的个数的元素，打个比方
<button v-for="item in 5" :key="item">{{item}}</button>
<!-- 这就是生成了5个按钮，item分别等于1，2，3，4，5 -->
有的时候start不等于1，就不能从1开始生成了，所以要对item进行判断，item必须是大于等于start才会显示，当前页码高亮就是判断当前遍历的item是否等于myCurrentPage ，等于就当前页码高亮显示
<!-- v-if和v-for可以同时使用，后面再优化 -->
<button
v-for="item in startEnd.end"
v-if="item >= startEnd.start"
:key="item"
:class="{ active: item === myCurrentPage }"
>
{{ item }}
</button>
三、页码1和最后一页页码的显示
如果start（end）不等于1（小于totalPage）说明出现了页码折叠，需要显示当前的页码1或者最后一页页码，使用v-if进行判断即可。这样做的原因就是，拿start来说，当start=1时，不存在页码折叠，页码就会又渲染出一个页码1，就有两个1，这样就不对了，所以当start等于1时，就把当前隐藏；
Snipaste_2021-06-09_11-06-23.png
Snipaste_2021-06-09_11-21-08.png
<button v-if="startEnd.start !== 1">1</button>
<button v-if="startEnd.end < totalPage">{{totalPage}}</button>
四、折叠(...)显示与隐藏
这个就相对好判断了，存在页码折叠就是说start>2或者end小于totalPage-1时就让他显示出来
<button class="disabled" v-if="startEnd.start > 2">...</button>
<button class="disabled" v-if="startEnd.end < totalPage - 1">...</button>
五、数据总条数
这个就easy了
<button class="disabled">共 {{ total }} 条</button>
完整代码
<template>
<div class="pageination">
<button
:disabled="myCurrentPage === 1"
:class="{ disabled: myCurrentPage === 1 }"
>
上一页
</button>
<button v-if="startEnd.start > 1">1</button>
<button class="disabled" v-if="startEnd.start > 2">...</button>
<button
v-for="item in startEndArr"
:key="item"
:class="{ active: item === myCurrentPage }"
>
{{ item }}
</button>
<button class="disabled" v-if="startEnd.end < totalPage - 1">...</button>
<button v-if="startEnd.end < totalPage">
{{ totalPage }}
</button>
<button
:disabled="myCurrentPage === totalPage"
:class="{ disabled: myCurrentPage === totalPage }"
>
下一页
</button>
<button class="disabled">共 {{ total }} 条</button>
</div>
</template>
点击切换页码
准备就绪之后就可以做交互了,首先上一页就是让当前的myCurrentPage-1，下一页就是myCurrentPage+1，点击页码就是让myCurrentPage = 当前的item,第一页和最后一页因为是固定的，之际传入1或最后一页页码,所以我们可以设置一个函数，统一处理页码的切换
定义click监听，省略了其他属性
<button @click="setCurrentPage(myCurrentPage - 1)"> 上一页</button>
<button @click="setCurrentPage(1)">1</button>
<button @click="setCurrentPage(item)">{{ item }}</button>
<button @click="setCurrentPage(totalPage)">{{ totalPage }}</button>
<button @click="setCurrentPage(myCurrentPage + 1)">下一页</button>
methods: {
// page: 接收参数，要切换到的页码
setCurrentPage(page) {
// 如果点击的同一个页码，retrue结束执行
if (page === this.myCurrentPage) return;
// 如果页码变了，将传递过来的page赋值给myCurrentPage
this.myCurrentPage = page;
}
}
