Question

我面临根据元素内容向其添加动态样式的问题。

<td class="text-xs-left">{{ props.item.limitCardStatus }}</td>

limitCardStatus键的值存储在多个对象中，如下所示：“活动，不活动，样本”。

我想要实现的是将“有效”绿色，“无效”红色和“样品”黄色。

到目前为止，我所拥有的是：我生成了响应核心的CSS类和样式，并且我尝试将v-for与:class一起使用，但是我似乎无法弄清楚。

这是整张桌子：

<v-data-table :headers="headers" :items="limitCards" hide-actions>
 <template v-slot:items="props">
  <td class="tableNumber text-xs-left">{{ props.item.number }}</td>
  <td class="text-xs-left">{{ props.item.limitCardNumber }}</td>
  <td class="text-xs-left">{{ props.item.productCode }}</td>
  <td class="text-xs-left">{{ props.item.plannedAmount }}</td>
  <td class="text-xs-left">{{ props.item.productName }}</td>
  <td
     class="text-xs-left"
     :class="{
     'green--text': limitCardStatus === 'Active',
     'yellow--text': limitCardStatus === 'Inactive',
     'yellow--text': limitCardStatus === 'Sample',
     }"
     >{{ props.item.limitCardStatus }}</td>
  </template>
 </v-data-table>

Can someone point me in the right direction? Thanks in advance!

Answer 1

您可以使用动态类轻松地做到这一点

<div
  class="text-xs-left"
  :class="{
    'green-color--text': limitCardStatus === 'Active',
    'yellow-color--text': limitCardStatus === 'Inactive',
    'yellow-color--text': limitCardStatus === 'Sample',
  }"
>{{ props.item.limitCardStatus }}</div>

更多信息为here

Answer 2

更干净的方法是使用 ES6 computed property names

假设您将名为 limitCardStatus 的 prop 传递给组件，

  <td
     class="text-xs-left"
     :class="{ [limitCardStatus]: 1 }"
     >{{ props.item.limitCardStatus }}</td>

1 就在那里，因为右侧必须有一个真值才能让 vue 应用类名，如果您不总是传入 {{1}，则可以执行 {{ [limitCardStatus]: limitCardStatus }} } 支持组件。

之后，您可以将 limitCardStatus 等的 CSS 选择器替换为 .green-text .Active 和 .Inactive

根据价值在Vue中动态添加类

2 个答案: