如何在 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 元素的值绑定徽章的样式（添加一个类，高、中或低）。我将如何实现这一目标？

原文由 develpr 发布，翻译遵循 CC BY-SA 4.0 许可协议

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}

原文由 lscmaro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以在 html 模板中为条件类尝试上面的代码

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

您可以在此处查看有关此主题的 官方 vue 文档。

原文由 alejandro 发布，翻译遵循 CC BY-SA 4.0 许可协议