If you try to write past the 39 characters in the text area, the background will turn misty rose. The general object syntax for n classes is as follows:
:class="{ class1: var1, class2: var2, ..., classn: varn }"
There are, however, a couple of alternatives to this syntax. First of all, you don't need to write the full object in the HTML; you can also bind to an object. The general way to do it is as shown:
<div :class="classes"></div> // in HTML // in your Vue instance data: { classes: { warn: true } }
At this point, manipulating the classes object will add or remove the warn class from the <div>. An even more clever way to bind is to a computed property that itself returns an object:
<div :class="classes"></div> ...
