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