Блог

Есть ли у меня способ добавить динамический стиль в зависимости от того, каким будет результат в моем div?

Я создал функцию, которая вычислит общее число, а затем изменит свойство данных, чтобы возвращать либо «Низкий», либо «Хороший» в зависимости от того, каким будет количество.

У меня есть два разных класса, которые я создал:

 .good-result {
  color: green;
  font-weight: bold;
}
.poor-result {
  color: orange;
  font-weight: bold;
}
 

Мой динамический стиль выглядит следующим образом

 <div class="resultValue">Water intake: <span :class="'Low'?'poor-result' : 'good-result'">{{ resultsWater }}</span></div>
 

Если свойство данных resultsWater говорит «Низкий», я хочу попробовать применить стиль .poor-result к свойству .good-result, в настоящее время он отображает только .poor-result, независимо от того, является ли значение divs «низким» или «Хорошим»

Попробуйте использовать интерполяцию строк и сравните resultsWater с 'Low' :

  :class="`${resultsWater === 'Low'?'poor-result' : 'good-result'}">