Question

我有一个要转换为Vue的项目，我想知道如何根据从数据库返回并用Vue呈现的内容有条件地向某些元素添加类。这是我不使用Vue时为应用程序编写的代码：

DeleterUserId

这很好。但是，我想知道是否有一种方法可以更轻松地通过Vue做到这一点？还是我必须找到一种方法将其放入我的Vue应用程序？

这是组件的一部分：

public abstract class AbpDbContext : DbContext, ITransientDependency, IShouldInitialize
{ 
    public IAbpSession AbpSession { get; set; }
    public IEntityChangeEventHelper EntityChangeEventHelper { get; set; }
    public ILogger Logger { get; set; }
    public IEventBus EventBus { get; set; }
    public IGuidGenerator GuidGenerator { get; set; }
    public ICurrentUnitOfWorkProvider CurrentUnitOfWorkProvider { get; set; }
    public IMultiTenancyConfig MultiTenancyConfig { get; set; }
    ...

我想做的是根据$(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'); } }); });元素的值绑定徽章的样式（添加高，中或低类之一）。我将如何实现？

Answer 1

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

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

您可能会在这里看到与此主题有关的official vue documentation。

Answer 2

在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 3

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

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

或

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

这样，您不必担心条件是否为假。

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

}

这可能对复杂情况有帮助。

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

4 个答案: