时间戳

首页 > 解决方案 > 如何在 Vue 中有条件地添加一个类？

javascript - 如何在 Vue 中有条件地添加一个类？

问题描述

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

标签： javascriptvue.jsvuejs2vue-component

解决方案

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

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

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

推荐阅读