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

如果您只需要在条件为真时添加一个类，您可以使用：

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

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

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

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

Answer 2

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

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

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

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

}

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