了解如何在Bootstrap-vue中使用分页

Question

我编写了以下代码：

<div>
    <div id="app" class="container">
        <div class="grid">
            <article v-for="tool in tools">
                <div class="title">
                    <h3>{{capitalizeFirstLetter(tool.name)}}</h3>
                </div>
                <div class="description">
                    {{tool.description}}
                </div>
                <br>
                <div>
                    <toggle-button :value=tool.status color="#82C7EB" :width=100 :height=30 :sync="true" :labels="{checked: 'Following', unchecked: 'Unfollowing'}" @change="onChange(tool)"/>
                </div>
            </article>
        </div>
    </div>
</div>

最近，我开始使用Bootstrap-Vue。我试图弄清楚如何在底部添加pagination。我不确定aria-controls的工作方式。我的目标是每页上有9个tools块。如何添加分页，以便可以移至tools的下9个块？

Answer 1