Class and Style Bindings | Vue component template class
Acommonneedfordatabindingismanipulatinganelementsclasslistandinlinestyles.Sinceclassandstylearebothattributes,wecanusev-bindtoassignthemastringvaluedynamically,muchlikewithotherattributes.However,tryingtogeneratethosevaluesusingstringconcatenationcanbeannoyinganderror-prone.Forthisreason,Vueprovidesspecialenhancementswhenv-bindisusedwithclassandstyle.Inadditiontostrings,theexpressionscanalsoevaluatetoobjectsorarrays.BindingHTMLClasses[1]BindingtoObjects[2]Wecanpassanobjectto:class(shortfor...
A common need for data binding is manipulating an elements class list and inline styles. Since class and style are both attributes, we can use v-bind to assign them a string value dynamically, much like with other attributes. However, trying to generate those values using string concatenation can be annoying and error-prone. For this reason, Vue provides special enhancements when v-bind is used with class and style. In addition to strings, the expressions can also evaluate to objects or arrays.
Binding HTML Classes [1]Binding to Objects [2]We can pass an object to :class (short for v-bind:class) to dynamically toggle classes:
template<div :class="{ active: isActive }"></div>The above syntax means the presence of the active class will be determined by the truthiness[3] of the data property isActive.
You can have multiple classes toggled by having more fields in the object. In addition, the :class directive can also co-exist with the plain class attribu...