html - 基于 vue.js 变量中字符串的类名

Question

我想为一个元素添加一个动态类和一个静态类。 以下代码不起作用。

var string = 'hugo';

<div v-bind:class="{ staticClass: true, dynamicClass: string }">
    {{ string }}
</div>

这是我想要完成的预期输出。

<div class="staticClass hugo">hugo</div>

我得到的是以下内容

<div class="staticClass dynamicClass">hugo</div>

非常感谢您。

Answer 1

引用here您可以将数组传递给 v-bind:class 以将多个类应用到您的 div。因为您有一个动态类，所以在数组语法中使用对象语法是有意义的。

在你的情况下它会是这样的

<div v-bind:class="[{staticClass: true}, string]">
    {{ string }}
</div>

Fiddle