Блог

Главная - Вопросы по программированию - Добавление класса в условие

Добавление класса в условие

#typescript #vue.js

#typescript #vue.js

Вопрос:

Я хотел бы добавить определенный класс в условие с помощью vue js.

У меня в моем хранилище данных есть 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:

Для отображения классов в зависимости от условий вы можете передать объект директиве class . Он отобразит те ключи объекта в виде имен классов, которые имеют true значение.

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

Смотрите документацию: https://v2.vuejs.org/v2/guide/class-and-style.html

Комментарии:

1. У меня ошибка, когда у меня был ваш код, подобный этому: <th :class=»{ ‘blue—text’: cartotalstores === cactotalstores ‘red—text’: cartotalstores != cactotalstores }»>{{ cartotalstores }}</th> Ошибки: неожиданная строка в

2. @AntoineKurka Просто поместите «,» между каждой парой ключ-значение.

Ответ №2:

вы можете использовать простое условие с троичным и :class директивой:

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

Только если значение 1 равно значению 2, применяется синий класс, если не красный.