8.5. 帖子分页

本教程最新版为 2.6,当前版本已放弃维护,请阅读最新版本!

简介

本小节中,为了实现帖子分页,我们写一个简单的分页组件,然后将其添加到帖子列表,其完成后的页面效果如下:

file

添加分页组件

src/components 下新建 Pagination.vue 文件,复制贴入以下代码:

src/components/Pagination.vue

<template>
  <ul v-if="totalPage > 1" class="pagination">
    <li :class="{ disabled: internalCurrentPage === 1 }">
      <a href="javascript:;" @click="changePage(internalCurrentPage - 1)">«</a>
    </li>
    <li v-for="n in totalPage" :class="{ active: internalCurrentPage === n }">
      <a href="javascript:;" @click="changePage(n)">{{ n }}</a>
    </li>
    <li :class="{ disabled: internalCurrentPage === totalPage }">
      <a href="javascript:;" @click="changePage(internalCu...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
讨论数量: 0

暂无话题~