I want to add a dynamic and a static class to an element. The following code doesn't work.
var string = 'hugo';
<div v-bind:class="{ staticClass: true, dynamicClass: string }">
{{ string }}
</div>
This is the expected output I would like to accomplish.
<div class="staticClass hugo">hugo</div>
What I get instead is the following
<div class="staticClass dynamicClass">hugo</div>
Thank you very much in advance.
As referenced here you can pass an array to
v-bind:class
to apply multiple classes to yourdiv
. Because you have one dynamic class, it would make sense to use the object syntax inside array syntax.In your case it would be something like that
Fiddle