bootstrap分页插件vue_bootstrap分页带每页数量

bootstrap分页插件vue_bootstrap分页可以实现网页分页功能，并且可以设置每页显示的数量。通过使用该插件，可以方便地在网页中展示大量数据，并进行分页浏览。

我们需要在网页中引入vue_bootstrap分页插件的相关文件，包括CSS和JavaScript文件。可以通过CDN引入或者下载到本地使用。接下来，我们需要在Vue组件中进行配置和使用。

在Vue组件中，我们首先需要定义一个分页组件，用于展示分页导航和处理分页事件。可以使用`<b-pagination>`标签来创建分页组件，并通过`v-model`指令绑定当前页码的值。示例代码如下：

<template>
  <div>
    <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage" @input="onPageChange"></b-pagination>
    <div v-for="item in paginatedData" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      perPage: 10, // 每页显示的数量
      totalRows: 100, // 总数据条数
      data: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        // ...
        { id: 100, name: 'Mike' }
      ]
    };
  },
  computed: {
    paginatedData() {
      const startIndex = (this.currentPage - 1) * this.perPage;
      const endIndex = startIndex + this.perPage;
      return this.data.slice(startIndex, endIndex);
    }
  },
  methods: {
    onPageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

在上述示例代码中，我们定义了一个分页组件，使用`v-model`指令绑定当前页码的值，通过`total-rows`属性设置总数据条数，通过`per-page`属性设置每页显示的数量。在`data`中定义了一个包含100条数据的数组，通过计算属性`paginatedData`实现根据当前页码和每页数量进行分页，并在页面中展示相应的数据。

当用户点击分页导航时，会触发`@input`事件，调用`onPageChange`方法更新当前页码的值，从而实现页面切换。可以根据实际需求，通过发送请求或者其他方式获取相应页码的数据。

总结一下，通过使用bootstrap分页插件vue_bootstrap分页，我们可以方便地实现网页分页功能，并且可以设置每页显示的数量。通过绑定当前页码的值，可以实现分页导航和处理分页事件，从而展示大量数据并进行分页浏览。