Как добавить класс условно в Vue?

Question

У меня есть проект, который я конвертирую в Vue, и мне было интересно, как я могу условно добавить класс к определенным элементам в зависимости от того, что возвращается из базы данных и отображается с помощью Vue. Вот код, который у меня был для приложения, когда я не использовал Vue:

$(document).ready(function() {
  $('.task_element').each(function(index, element) {
    if ($(element).find(".task_priority").text().trim() === "high") {
      $(element).addClass('high');
    } else if ($(element).find(".task_priority").text().trim() === "medium") {
      $(element).addClass('medium');
    } else if ($(element).find(".task_priority").text().trim() === "low") {
      $(element).addClass('low');
    }
  });
});

И это работало нормально. Но мне интересно, есть ли способ сделать это с Vue намного проще? Или мне нужно найти способ добавить это в мое приложение Vue?

Вот часть компонента:

<p class="task_description">
  {{ task.description }} <span class="badge badge-pill">priority</span>
</p>
<p class="task_priority">
  {{ task.priority }}
</p>

Я хочу привязать стиль значка (добавить один из классов, высокий, средний или низкий) в зависимости от значения элемента task_priority. Как бы я этого достиг?

Answer 1

в привязке класса Vue Я думаю, что вы можете сделать это прямо в элементе и добавить свой класс с помощью дополнительного вычисляемого класса Vue.

например:

<div class="task_priority" :class="task.priority">{{ task.priority }}</div>

И сделайте свой стиль как таковой (предполагая, что выход для task.priority высокий, средний, низкий. Похоже, что это будет в соответствии с вашим опубликованным кодом)

.task_priority.high {color: red}
.task_priority.medium {color: yellow}
.task_priority.low {color: green}

Answer 2

Если вам нужно добавить класс, только если условие выполняется, вы можете использовать:

<p v-bind:class="{ 'className' : priority === low}"></p>

или

<p :class="{ 'className' : priority === low}"></p>

Таким образом, вам не нужно беспокоиться, если условие оказалось ложным.

Answer 3

Вы можете попробовать этот код выше для условного класса в HTML-шаблон

<element v-bind:class = "(condition)?'class_if_is_true':'else_class'"></element>

Официальную документацию по этой теме можно посмотреть здесь.