Question

您好，我想让wen item.status不处于活动状态，然后文字将变为红色。我有这个脚本：

<vue-tabs class="row" direction="vertical" value="Description" >      
<div class="static" v-bind:class="{ACTIVE:statusIsActiveFunction(item.status), 'text-danger': !statusIsActiveFunction(item.status)}">

        <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>   
        </div>     
      </vue-tabs>

但卡在我认为的数据部分：

 data: {
  isActive: true,
  hasError: false
},

Answer 1

代替v-bind:class="{ACTIVE:statusIsActiveFunction(item.status)}

您只需要v-bind:class="{ 'ACTIVE' : isActive }"

因此，如果isActive为true，则它将添加ACTIVE类。

使用:class="{ 'ACTIVE' : isActive }"甚至可以使其更短v-bind：class的快捷方式是：class。

Answer 2

<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>

我如何使用v-bind：class

2 个答案: