如何在v-if Vue.js中添加类

Question

如果状态为非活动状态，我希望以红色突出显示文本。以下是我的代码

<td v-for="option in selected_type" v-if="option.id == item.status"  v-bind:class="add class here">
    @{{ option.status }}
</td>

谢谢

Answer 1

<td v-for="option in selected_type" :key="option.id" :class="{ inactive: item.status }">

我假设status属性是一个布尔值 （不确定为什么你要将id与状态进行比较）

.inactive { color: red; }

Answer 2

一个简单的例子，假设status是布尔值：

＆＃13;

＆＃13;

new Vue({
  el: "#app",
  data: {
    items: [
      { label: 'foo', status: true },
      { label: 'bar', status: false }
    ]
  }
})

＆＃13;

.text-red {
  color: red;
}

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <p v-for="item in items" v-bind:class="{ 'text-red': item.status }">
    {{item.label}}
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;