如何使用 Bootstrap Vue 中的 <b-pagination-nav>？答案

【问题标题】：How to use <b-pagination-nav> from Bootstrap Vue?如何使用 Bootstrap Vue 中的 <b-pagination-nav>？
【发布时间】：2020-01-10 22:36:27
【问题描述】：

我想开始使用这个tutorial中介绍的。问题是我不知道如何使标签在我的网站上工作。教程中给出的关于如何做到这一点的解释非常模糊，作为初学者，我无法使其工作。

我安装了 bootstrap 和 bootstrap-vue，并通过以下方式添加了 .css 和 .js 文件：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-vue.min.css">
<script src="js/bootstrap-vue.min.js"></script>

但是，我认为这些都没有添加标签，因为当我尝试实现它时，它没有出现。在上面链接的教程的底部，有一个部分提供了有关如何导入单个元素的信息。我尝试使用那里提供的代码行，但它没有改变任何东西。请帮帮我。

【问题讨论】：

你是如何创建 vue 项目的？使用vue cli ?
我想在我的网站上使用代码。我不熟悉什么是 vue 项目。

标签： javascript vue.js bootstrap-vue

【解决方案1】：

在 BootstrapVue 网站上，您会找到使用它所需的一切。

您的案例列在“入门”的#Browser 部分。确保将所有这些依赖项添加到页面的 <head>。

而且，至于使用它，你必须最早在window.load事件上初始化一个Vue实例。

例子：

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        perPage: 3,
        currentPage: 1,
        items: [
          { id: 1, first_name: 'Fred', last_name: 'Flintstone' },
          { id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
          { id: 3, first_name: 'Barney', last_name: 'Rubble' },
          { id: 4, first_name: 'Betty', last_name: 'Rubble' },
          { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
          { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
          { id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
          { id: 8, first_name: 'Rockhead', last_name: 'Slate' },
          { id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
        ]
      }
    },
    computed: {
      rows() {
        return this.items.length
      }
    }
  })
}

<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Example #app template -->

<div id="app">
  <template>
    <div class="overflow-auto">
      <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        aria-controls="my-table"
      ></b-pagination>

      <p class="mt-3">Current Page: {{ currentPage }}</p>

      <b-table
        id="my-table"
        :items="items"
        :per-page="perPage"
        :current-page="currentPage"
        small
      ></b-table>
  </div>
</template>
</div>

【讨论】：