上一节

动态显示数据

上一节获取到了由父组件传递过来的数据，也用计算属性计算出了该有的数据，下面就要渲染数据了

一、上一页和下一页的禁用
当当前页码等于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;
    }
  }

下一节