Twitter bootstrap 使用vue.js更改引导上的颜色

我如何使用vue.js和引导垂直选项卡运行此脚本

<vue-tabs class="row" direction="vertical" value="Description" >      
  <div v-for="(item, index) in siteObject.line_info" :key="index">
    <v-tab :title="siteObject.line_info[index].lineid">
      <div class="description text-left">
        <small v-for="(field, key) in item" :key="key">
          <strong>{{ key }}</strong> {{ field }}<br>
        </small>
      </div>
    </v-tab> 
  </div>     
</vue-tabs>

我有这个结果

nsn 0102753206

upk 1018.0-1/2

活动状态

莱克斯·沃古特

当“状态”处于活动状态时，所有文本都是红色时，我该怎么办？

您看过吗

将：class={'text danger'：status=='Active'}添加到要应用红色文本的元素

然后在css中创建.text危险

在这个例子中，我们基本上是说：

如果“状态”正好等于“活动”，则添加一类文本危险

风格

---

我刚刚添加了这个类并创建了css.redTextClass{color:red；}没有任何变化谢谢你的帮助我对这个东西很新你能帮我更多吗请用我的例子？我的意思是一样的，但是没有很多按钮thanks@Sofiane在我看来，您希望它匹配活动和非活动？基于您上面提供的数据。你试过了吗？你在使用Vue开发工具吗？那里的状态是什么？你将这个类应用于什么？我正在使用它我应该看什么道具数据或计算？

<vue-tabs class="row" direction="vertical" value="Description" >
     <div  v-for="(item, index) in siteObject.line_info" :key="index">
        <v-tab :title="siteObject.line_info[index].lineid">
            <div class="description text-left" :class="{ 'text-danger': item.status === 'ACTIVE' }">
                <small v-for="(field, key) in item" :key="key">
                    <strong>{{ key }}</strong> {{ field }}<br>
                </small>
                <pre>{{item.status}}</pre>
            </div>

        </v-tab>

    </div>

  </vue-tabs>

<style scoped>
  .text-danger {
    color: red !important;
  }
</style>