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

Question

我想开始使用本文介绍的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>

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

Answer 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>

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

How to use <b-pagination-nav> from Bootstrap Vue?

javascript

vue.js

bootstrap-vue