vue.js - VueJS2 - 绑定(bind)部分类名

Question

是否可以仅更改(动态绑定(bind))类名的一部分。例如我有这个警告框:

<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类——类名的success可以是danger, info... (取决于消息的类型)。

这有可能吗？

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 属性(您可以随意命名)。我所说的“属性”是指它可以是一个数据、一个计算结果甚至是一个方法调用。

注意 :class 的参数是一个 JavaScript 表达式:

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

所以请注意引号。

您还可以使用 array syntax ，如果你觉得更清楚:

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

正如 @Sphinx 提醒的那样在注释中，你也可以同时使用绑定(bind) (:class) 和未绑定(bind) (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">