javascript 如何在Vue中有条件地添加一个类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52124081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a class conditionally in Vue?
提问by hoolakoola
I have a project that I'm converting to Vue, and I was wondering how I can conditionally add a class to certain elements depending on what is returned from the database and rendered with Vue. Here is the code I had for the application when I was not using 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');
}
});
});
And this worked fine. But, I'm wondering is there a way to do this with Vue much more easily? Or would I have to find a way to throw this into my Vue app?
这工作得很好。但是，我想知道有没有办法用 Vue 更轻松地做到这一点？或者我是否必须找到一种方法将其放入我的 Vue 应用程序中？
Here is part of the component:
这是组件的一部分：
<p class="task_description">
{{ task.description }} <span class="badge badge-pill">priority</span>
</p>
<p class="task_priority">
{{ task.priority }}
</p>
What I want to do is bind the style of the badge (add one of the classes, either high, medium, or low) based on the value of the task_priorityelement. How would I achieve this?
我想要做的是根据task_priority元素的值绑定徽章的样式（添加一个类，高、中或低）。我将如何实现这一目标？
采纳答案by lscmaro
in Vue class binding I think you can do this right inline in the element and actually add your class you'd like with an additional Vue computed class.
在 Vue 类绑定中，我认为您可以在元素中正确内联并实际添加您想要的类，并使用额外的 Vue 计算类。
for example:
例如：
<div class="task_priority" :class="task.priority">{{ task.priority }}</div>
And do your styling as such (assuming the output for the task.priorityis high,medium,low. it looks like it would be according to your posted code)
并做你的造型（假设输出task.priority是高，中，低。看起来它会根据你发布的代码）
.task_priority.high {color: red}
.task_priority.medium {color: yellow}
.task_priority.low {color: green}
回答by alejandro
You can try this code above for conditional class in the html template
您可以在 html 模板中为条件类尝试上面的代码
<element v-bind:class = "(condition)?'class_if_is_true':'else_class'"></element>
You may see the official vue documentationon this topic here.
您可以在此处查看有关此主题的官方 vue 文档。
回答by Anil Singh
If you only need to add a class if condition is true, you can use:
如果您只需要在条件为真时添加一个类，您可以使用：
<p v-bind:class="{ 'className' : priority === low}"></p>
or
或者
<p :class="{ 'className' : priority === low}"></p>
This way you don't have to care if condition turned out to be false.
这样您就不必关心条件是否为假。
回答by Akshay Kumbhar
You can try creating function and pass condition compare value to it
您可以尝试创建函数并将条件比较值传递给它
<span bind:class="BindOrderStatus(order.status)">{{order.status}}</span>
and write function like
并编写函数，如
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
}
}
this may be help you for complex conditions.
这可能有助于您应对复杂的情况。
