当前位置：首页 > VUE

bootstrap和vue实现分页

2026-01-22 09:10:29VUE

Bootstrap 与 Vue 实现分页

使用 Bootstrap 分页组件

Bootstrap 提供了分页组件，可以通过 pagination 类快速实现分页样式。以下是一个基本的分页结构：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

结合 Vue 动态分页

在 Vue 中，可以通过数据绑定动态生成分页按钮，并处理分页逻辑。以下是一个完整的示例：

<template>
  <div>
    <!-- 分页组件 -->
    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li class="page-item" :class="{ disabled: currentPage === 1 }">
          <a class="page-link" href="#" @click.prevent="prevPage">Previous</a>
        </li>
        <li 
          class="page-item" 
          v-for="page in totalPages" 
          :key="page"
          :class="{ active: currentPage === page }"
        >
          <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
        </li>
        <li class="page-item" :class="{ disabled: currentPage === totalPages }">
          <a class="page-link" href="#" @click.prevent="nextPage">Next</a>
        </li>
      </ul>
    </nav>

    <!-- 分页数据展示 -->
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // 更多数据...
      ],
      currentPage: 1,
      itemsPerPage: 5
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.data.slice(start, end);
    }
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

关键点说明

分页逻辑
- totalPages 计算总页数，通过 Math.ceil 向上取整。
- paginatedData 根据当前页码和每页显示数量动态切片数据。
事件处理
- changePage 直接跳转到指定页码。
- prevPage 和 nextPage 处理上一页和下一页逻辑。
样式绑定
- 使用 :class 动态绑定 active 和 disabled 状态，提升用户体验。