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.description}}优先级


{{task.priority}}

---

我想做的是根据

task\u priority

元素的值绑定徽章的样式（添加一个类，高、中或低）。如何实现这一点？

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

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

---

在Vue类绑定中，我认为您可以在元素中内联执行此操作，并实际添加您想要的类和其他Vue计算类

例如：

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

---

如果仅在条件为true时需要添加类，则可以使用：

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

---

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

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

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

}

---

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

您可以将其作为您的组件共享吗？通常，我们使用vuejs计算属性进行此操作。我已使用与问题相关的组件部分更新了我的问题。请检查此项，这太棒了，这就是我一直在寻找的解决方案。绑定它和仅仅使用：class有什么区别？@BigMoney:这是一样的。更多关于这方面的信息。有人能帮我弄清楚使用v-bind:class和：class的区别吗？它总是检查状况吗？比如，如果在页面中的某个操作过程中条件发生了变化，那么类应该出现还是消失？我相信v-bind是单向绑定。“：”只是v-bind的简写符号，所以没有区别。它是否自动更新被称为“反应式”——90%的时间它应该“正常工作”，但有时你不得不处理计算属性和方法等。

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

<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