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

Posted 2023-02-22

【中文标题】如何在 Vue 中有条件地添加一个类？

【英文标题】：How to add a class conditionally in Vue?

【发布时间】：2019-02-06 23:53:41

【问题描述】：

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

【问题讨论】：

你能作为你的组件分享吗？

一般来说，我们使用 vuejs 计算属性。

我已经用与问题相关的组件部分更新了我的问题

看看这个***.com/questions/45145261/vue-js-dynamic-class-name

【参考方案1】：

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

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

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

【讨论】：

谁能帮我弄清楚使用 v-bind:class 和 :class 有什么区别？它总是检查条件吗？就像在页面中的某些操作过程中条件发生变化并且类应该出现或消失一样？我相信 v-bind 是一种绑定方式。

":" 只是 v-bind 的简写符号，所以没有区别。它是否自动更新被称为“反应式”——90% 的时间它应该“正常工作”，但有时你必须使用计算属性与方法等。

【参考方案2】：

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

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

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

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

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

【讨论】：

绑定它和只使用:class有什么区别？

@BigMoney：是一回事。更多内容请参阅official docs。

【参考方案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

【讨论】：

这太棒了，正是我正在寻找的那种解决方案。

【参考方案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

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