如何在 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

你可以试试上面这段代码在 html 模板中的条件类

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

您可以在此处查看有关此主题的 official vue documentation。

Answer 2

如果你只需要在条件为真的情况下添加一个类，你可以使用：

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

或者您可以通过省略v-bind来使用速记符号

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

这样您就不必关心条件是否为假。

Answer 3

在 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 4

您可以尝试创建函数并将条件比较值传递给它

<span bind:class="BindOrderStatus(order.status)">{{order.status}}</span>

然后写函数

 methods: {
    BindOrderStatus: function (status){
        if(status === "received")
        {
            return "badge badge-pill badge-primary pending-badge";
        }else if(status === "accepted" || status === "auto-accepted"){
            return "badge badge-pill badge-primary in-progress-badge"
        }.......etc conditions

}

这对于复杂的情况可能会有所帮助。