vuejs

Class and Style Bindings 86
Changed backround color
We have applied a class to the body for our convenience and now body is referenced within our el
property. What this code actually does, is “flipping” the background color with a hit of the button.
Pressing it invokes the flipColor function that reverses the value of “color” originally set to true.
Then the v-bind:class is going to toggle the class name to ‘body-red’ or ‘body-blue’ conditionally
depending on the truthfulness of “color” value. That given, the style is going to apply on each class
and give us the desired result according to which class is active.
Info
The v-bind:class directive can co-exist with the plain class attribute.
So in our example, body always has the text-center class and conditionally one of
body-red or body-blue.
Warning
Although you can use mustache interpolations such as class=”{{ className }}” to bind the
class, it is not recommended to mix that style with v-bind:class. Use one or the other!