根据条件添加类答案

【问题标题】：Add a class on a condition根据条件添加类
【发布时间】：2021-05-31 19:37:09
【问题描述】：

我想用 vue js 在一个条件下添加一个特定的类。

我的 DataStore 中有 2 个值，如下所示（TypeScript）：

value1: 0 as number,
value2: 0 as number

有了这个值，我想在我的模板中添加类：

blue--text if value1 == value2
or
red--text if value1 != value2

像这样：

<p class="blue--text">{{ value1 }}</p>
or
<p class="red--text">{{ value1 }}</p>

有人知道怎么做吗？

【问题讨论】：

【解决方案1】：

要根据条件渲染类，您可以将对象传递给类指令。它将对象的那些键呈现为类名，具有true 值。

<p 
  :class="{
    'blue--text': value1 == value2,
    'red--text': value1 != value2
  }"
>
    {{ value1 }}
</p>

【讨论】：

【解决方案2】：

您可以使用带有三元和:class 指令的简单条件：

<p :class="value1 === value2 ? 'blue--text' : 'red--text'">{{ value1 }}</p>

只有当 value1 等于 value2 时，才会应用蓝色类，如果不是红色类。

【讨论】：