时间戳

首页 > 解决方案 > Vue中根据值动态添加类

css - Vue中根据值动态添加类

问题描述

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

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

键的值limitCardStatus存储在多个对象中，如下所示：“Active、Inactive、Sample”。

我想要实现的是将“Active”绿色、“Inactive”红色和“Sample”黄色着色。

到目前为止我所拥有的是：我生成了对应的 CSS 类和样式，并且我尝试使用v-forwith :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!

标签： cssvue.js

解决方案

您可以使用这样的动态类轻松完成

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

更多信息在这里

推荐阅读