Question

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

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

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

是否可以这样做？

Answer 1

您可以使用常规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在评论中提醒的那样，您也可以同时使用绑定（:class）和未绑定（class）属性，Vue会合适地合并它们： / p>

<!-- 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">

VueJS2 - 绑定类名的一部分

1 个答案: