根据条件添加类

Question

我想在使用 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>

有人知道怎么做吗？

Answer 1

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

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

查看文档：{​​{3}}

Answer 2

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

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

仅当 value1 等于 value2 时应用蓝色类，否则应用红色类。