gpt4 book ai didi

javascript - 如何在 Bootstrap Vue 中使用

转载 作者:行者123 更新时间:2023-11-28 03:34:41 25 4
gpt4 key购买 nike

我想开始使用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>

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

最佳答案

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

关于javascript - 如何在 Bootstrap Vue 中使用 <b-pagination-nav>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57849290/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com