VueJS2 - 绑定类名的一部分

Posted 2021-04-06

是否可以仅更改（动态绑定）类名的一部分。例如，我有这个警告框：

<div class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h4><i class="icon fa fa-check"></i> Alert!</h4>
        Success alert preview. This alert is dismissable.
    </div>

这个动态类的唯一部分是警报成功类 - 类名的成功可以是危险，信息......（取决于消息的类型）。

是否有可能做到这一点？

答案

你可以使用常规的v-bind：

<div :class="'alert alert-' + classType + 'alert-dismissible'">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h4><i class="icon fa fa-check"></i> Alert!</h4>
    Success alert preview. This alert is dismissable.
</div>

作为classType的财产（你可以命名，但你想要它）。 “属性”我的意思是它可以是data，计算甚至方法调用。

请注意:class的参数是一个javascript表达式：

'alert alert-' + classType + 'alert-dismissible'

请注意引号。

如果你发现它更清楚，你也可以使用array syntax：

<div :class="['alert', 'alert-' + classType, 'alert-dismissible']">

正如@Sphinx在评论中提醒的那样，你也可以同时使用bound（:class）和unbound（class）属性，Vue会合适地合并它们：

<!-- if classType equals to the whole class name, like 'alert-active' -->
<div class="alert alert-dismissible" :class="classType">
<!-- if classType equals to just a part of class name, like 'active' -->
<div class="alert alert-dismissible" :class="'alert-' + classType">