vue和bootstrap实现分页
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 结合的分页功能。
