[英]How to add a class conditionally in Vue?
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.我有一个正在转换为 Vue 的项目,我想知道如何根据从数据库返回并使用 Vue 呈现的内容,有条件地将类添加到某些元素。 Here is the code I had for the application when I was not using 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?
但是,我想知道有没有办法用 Vue 更容易地做到这一点? Or would I have to find a way to throw this into my Vue app?
还是我必须想办法把它扔到我的 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_priority
element.我想要做的是根据
task_priority
元素的值绑定徽章的样式(添加其中一个类,高、中或低)。 How would I achieve this?我将如何实现这一目标?
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 documentation on this topic here.您可以在此处查看有关此主题的官方 vue 文档。
If you only need to add a class if condition is true, you can use:如果只需要在条件为真时添加一个类,则可以使用:
<p v-bind:class="{ 'className' : priority === low}"></p>
or you can use shorthand notation by omitting v-bind
或者您可以通过省略
v-bind
来使用简写符号
<p :class="{ 'className' : priority === low}"></p>
This way you don't have to care if condition turned out to be false.这样你就不必关心条件是否被证明是错误的。
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.priority
is 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}
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.这可能会帮助您应对复杂的情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.