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分配一个字符串类，它可以正常工作。

Answer 2

看起来你在title-item-class之前错过了冒号。尝试 <b-tab title="Transaction History" :title-item-class="tab-title-class">

Answer 3

如果您在同一模板中使用样式，如下所示，

<style>
.tab-title-class {
    color: #FF0000 !important;  
}
</style>

这将在您的控制台中显示警告，例如

＆＃34; [Vue警告]：模板应该只负责映射说到用户界面。避免在您的标签中放置带副作用的标签模板，例如＆lt;风格＆gt;。＆＃34;

并且不解析这些样式。

在某些外部CSS中使用此样式。

也为类

使用v-bind

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