{"componentChunkName":"component---src-templates-blog-post-js","path":"/dynamic-binding-of-classes-and-styles-in-vue/","webpackCompilationHash":"23268da9a2d41a689f81","result":{"data":{"site":{"siteMetadata":{"title":"A Vue Blog","author":"Gautham Lal"}},"markdownRemark":{"id":"c98915de-eb0e-5c31-8823-e7238a361b6b","excerpt":"We know how to attach classes to a tag. But what if we want to do so dynamically. For this we can use the v-bind directive with class. v-bind can be used along…","html":"

We know how to attach classes to a tag. But what if we want to do so dynamically. For this we can use the v-bind directive with class. v-bind can be used along with style to apply styles dynamically.

\n

Classes

\n

Object Syntax

\n

We pass an object to v-bind:class where the key is the name of the class and the value is a boolean to decide whether we want to display the class or not.

\n
<div class=\"box\" v-bind:class=\"{ active: isActive }\"></div>
\n

So if isActive is true, the class active gets attached to the node.

\n

We can also have multiple classes by having more fields in the object that is being passed. For the given template,

\n
<div class=\"box\" v-bind:class=\"{ active: isActive, redBorder: hasError }\"></div>
\n

And the following data,

\n
data: {\n  isActive: true,\n  hasError: false\n}
\n

The rendered node will look like this.

\n
<div class=\"box active\"></div>
\n

When hasError become true, hasError class will get tagged on.

\n

The object doesn’t have to be inline. It can be stored in data and then be accessed in the template. We could also use the computed property to return the object.

\n
<div class=\"box\" v-bind:class=\"classObject\"></div>
\n
data: {\n  classObject: {\n    active: true,\n    redBorder: false\n  }\n}
\n

Or with computed properties:

\n
data: {\n  isActive: true,\n  hasError: false\n},\ncomputed: {\n  classObject: function() {\n    return {\n      active: this.isActive,\n      redBorder: this.hasError\n    }\n  }\n}
\n

Array Syntax

\n

We can also pass classes to a node by an array. This is extremely useful when we have a list of classes to apply.

\n
<div class=\"box\" v-bind:class=\"[ activeClass, errorClass ]\"></div>
\n
data: {\n  activeClass: 'active',\n  errorClass: 'redBorder'\n}
\n

This will render:

\n
<div class=\"box isActive hasError\"></div>
\n

You could also have objects in these arrays which can be useful in case of dynamically attaching classes.

\n
<div class=\"box\" v-bind:class=\"[ { active: isActive }, errorClass ]\"></div>
\n
data: {\n  isActive: true,\n  errorClass: 'redBorder'\n}
\n

Inline Styles

\n

Object Syntax

\n

Similar to the case of classes, we can pass an object to v-bind:style. CSS properties can be either camelCase or kebab-case(mention within quotes).

\n
<div class=\"box\" v-bind:style=\"{ backgroundColor: currentColor, fontSize: fontSize + 'px' }\"></div>
\n
data: {\n  currentColor: 'red',\n  fontSize: 30\n}
\n

You could also bind style through an object from data property or through a computed property that returns an object.

\n
<div class=\"box\" v-bind:style=\"styleObject\"></div>
\n
data: {\n  styleObject: {\n    backgroundColor: 'red',\n    color: 'white'\n    fontSize: 30 + 'px'\n  }\n  \n}
\n

Array Syntax

\n

We can also pass multiple style objects to v-bind:style with the help of an array.

\n
<div class=\"box\" v-bind:style=\"[ blandStyle, dashingStyle]\"></div>
\n
\n

As an exercise, you could create events to change the colour of the background and text of a div. For example, a click event changes the colour of a div from red to green and back and forth. And to take a step further, try creating a progress bar! Good luck!

","frontmatter":{"title":"Dynamic Binding of Classes and Styles in Vue.js!","date":"August 27, 2019","description":"There will be a lot of situations where the classes and styles attached to a node will have to be dynamic. Let's see how it's done."}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/dynamic-binding-of-classes-and-styles-in-vue/","previous":{"fields":{"slug":"/watchers-to-watch-your-properties/"},"frontmatter":{"title":"Watchers, to Watch Your Properties!"}},"next":{"fields":{"slug":"/conditional-rendering-and-list-rendering/"},"frontmatter":{"title":"Conditional Rendering and List Rendering in Vue.js"}}}}}