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

1 个答案: