使用 bootstrap-vue：如何将类添加到 b 分页组件中的页面按钮

Posted 2023-02-23

【中文标题】使用 bootstrap-vue：如何将类添加到 b 分页组件中的页面按钮

【英文标题】：With bootstrap-vue: How to add a class to the page buttons in a b-pagination component

【发布时间】：2019-06-12 09:20:22

【问题描述】：

假设我有一个 .vue 文件，我在我的 vue 组件中使用 bootstrap-vue 并在模板中使用此代码：

<b-pagination
  :total-rows="totalRows"
  :per-page="perPage"
/>

在浏览器页面中会编译成如下输出代码：

<ul class="pagination b-pagination">
  <li class="page-item active">
    <a href="#" class="page-link btn-primary">1</a>
  </li>
  <li class="page-item">
    <a href="#" class="page-link btn-light">2</a>
  </li>
  <li class="page-item">
    <a href="#" class="page-link btn-light">3</a>
  </li>
</ul>

如何从 .vue 文件中为分页组件的a 元素添加一个类？

【参考方案1】：

我不确定您是否可以向 a 元素添加类，但您可以使用以下方法在 CSS 中选择 a 元素：

.b-pagination li .page-link 
  //CSS rules

【讨论】：

我需要添加一个类，我可以使用 css 选择器，谢谢。 :)

那你可能会考虑使用javascript来添加类，因为我在文档中没有看到这个功能。