当前位置：首页 > VUE

vue和bootstrap实现分页

2026-01-23 01:00:40VUE

Vue 和 Bootstrap 实现分页

安装依赖

确保项目中已安装 Vue 和 Bootstrap。若未安装，可通过以下命令安装：

npm install vue bootstrap @popperjs/core

引入 Bootstrap

在项目的入口文件（如 main.js）中引入 Bootstrap 的 CSS 和 JavaScript：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

创建分页组件

在 Vue 组件中，使用 Bootstrap 的分页样式和 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 {
      currentPage: 1,
      itemsPerPage: 5,
      data: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // 更多数据...
      ]
    };
  },
  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>

关键点说明

currentPage 表示当前页码，itemsPerPage 控制每页显示的数据量。
totalPages 通过计算属性动态计算总页数。
paginatedData 根据当前页码截取对应的数据片段。
分页按钮通过 v-for 动态生成，并绑定点击事件切换页码。

样式调整

Bootstrap 分页组件默认样式可直接使用，如需自定义样式，可通过覆盖 CSS 实现：

.pagination {
  margin-top: 20px;
}
.active .page-link {
  background-color: #007bff;
  border-color: #007bff;
}

服务器分页（可选）

若数据来自后端 API，需将当前页码和每页条数作为参数请求数据：

methods: {
  async fetchData(page) {
    const response = await axios.get(`/api/items?page=${page}&limit=${this.itemsPerPage}`);
    this.data = response.data.items;
    this.totalPages = response.data.totalPages;
  }
}

通过以上步骤，即可实现 Vue 和 Bootstrap 结合的分页功能。

vue和bootstrap实现分页