Vue.js 2 Cookbook

How it works...

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> ...