Learn Vue: Style and Class Bindings

Sometimes when working with Vue, we might need to apply some CSS to an element based on some certain conditions. Vue.js provides us with special syntax to dynamically bind our styles and CSS.

Binding to Classes

There are different ways we can bind CSS classes to our html. We can either use the object binding or the array binding

Object binding

We can add CSS dynamically to our html by passing the classes to an object using v-bind:class="{}" syntax. let's see an example of this:

//script
const isBlue = ref(true);

//template
<div v-bind:class="{"blue-text": isBlue}">I'm a blue text</div>

//css
.blue-text {
color: blue;
}

The blue-text class will be added to the div depending on whether the isBlue variable is true or false, in this case it's true, so the blue-text class we be added to the div which will then render:

<div class="blue-text">I'm a blue text</div>

If we change isBlue to false, the class list will updated automatically and accordingly, i.e. the blue-text class will be removed.

We can also add multiple classes to the div like so:

<div v-bind:class="{"blue-text": isBlue, "active": isActive}">I'm a blue text</div>

We can also use the v-bind:class shorthand :class to dynamically bind classes:

<div :class="{"blue-text": isBlue}">I'm a blue text</div>

Array Binding

We can also bind :class to an array like so:

<div :class="[isBlue ? "blue-text" : '']">I'm a blue text</div>

We're using the same example but this time in a different way, we're binding the blue-text class to the div depending on the status of the isBlue variable. When isBlue becomes false the class is removed. Optionally we can add another class to the div to toggle them conditionally:

<div :class="[isBlue ? 'blue-text' : 'red-text']">I'm either a blue or red text</div>

Now when isBlue is false the text changes to red and when isBlue is true the text changes to blue.

Binding to Inline Styles

Just like :class binding, we can also bind styles directly to an HTML element using :style v-bind syntax. Let's see this in action:

Object Binding

<div :style="{color: blue, 'font-size': '20px'}"> I'm a blue text </div>

We can also declare our object directly in the script section to make our code cleaner.

const styleObject = reactive({
  color: 'blue',
  'font-size': '20px'
})

<div :style="styleObject">I'm a blue text</div>

Array Binding

One of the many benefits of binding to an array is that you can bind multiple objects to a single array.

<div :style="[styleObject1, styleObject2, styleObject3]"></div>

Apart from binding object styles to an array, we can also bind our styles directly into the array.

Comments

[May Kittens Devour Your Soul]

is this how dark and light __scheme switches get done?

[Agu O. Wisdom]

Yes.. there are other ways to do it also. I will write an article on how to implement light and dark theme/scheme with Vue this week.