twitter-bootstrap - 在 vue.js 条件后更改颜色

Question

当我使用这个脚本时:

<div class="card-content">
        <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>
      </div> 

我有这样的结果:

nsn 0102799121
上行 173.0-1/1
状态活跃
lex_id 78EFFEFVS
hdf_port
product_id PPS515818292
技术 VDSL
access_type BBCSNaked

如何显示状态 wen 是 active red 而 he inactive 是灰色？

Answer 1

您可能正在寻找条件类绑定(bind)。

https://v2.vuejs.org/v2/guide/class-and-style.html

<div class="static"
 v-bind:class="{ active: item.STATUS, 'text-danger': !item.Active}">
</div>

在您的情况下，我建议创建一个接收项目的函数。如果字符串 === ACTIVE 与否，则返回 true/false。像这样的东西:

<div class="static"
 v-bind:class="{ active: statusIsActiveFunction(item.STATUS), 'text-danger': !statusIsActiveFunction(item.STATUS)}">
</div>