javascript - 更改 bootstrap vue 选项卡标题的标题颜色

Question

我正在使用 bootstrap-vue.js 创建一个选项卡。结果是这样的

我只想更改选项卡标题颜色，因为它使用我项目中的默认颜色。从 bootstrap-vue.js 官方链接 ( https://bootstrap-vue.js.org/docs/components/tabs ) 有一个 title-item-class 用于对选项卡标题进行任何更改。所以我像这样编写代码:

<b-tab title="Transaction History" title-item-class="tab-title-class">

和我的CSS:

.tab-title-class {
    color: #FF0000 !important;  
}

但是没有任何效果。那么这里有什么问题呢？提前致谢。

Answer 1

使用 v-bind 指令应用自定义类，并使用引号表示它是一个字符串:

<b-tab title="Transaction History" :title-item-class="'tab-title-class'">

:title-item-class 只是 v-bind:title-item-class

的别名

这是因为 bootstrap vue 使用 props 而不是简单的 html 属性。其中 title 只是 html 属性，您不需要使用 v-bind。

<小时/>

但我认为，你需要应用:title-link-class。这是因为链接标签正在那里应用。

<b-tab title="Transaction History" :title-link-class="'tab-title-class'">

使用v-bind时，它会检查输入的类型。如果未定义，那么您将收到错误。因此，这里我们没有在 data 选项中定义此类，而是简单地为 css 分配一个字符串类，这样就可以正常工作。