How To Add Multiple Classes in VueJS | Class Binding

In the Vuejs tutorial, we will learn how to add multiple classes in an Html Element dynamically.

We can add more than one class in vue by binding them to the HTML element using v-bind.

What is v-bind in Vue : Class Binding?

The v-bind directive in Vue is used for data binding that lets us manipulate an element’s class or inline style.

In Vue, we can pass objects and arrays to our v-bind directive that let us add multiple classes to our element.

Syntax:

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

For binding a class we can use v-bind:class or we can simply use :class

In the above syntax, we have bind a class named active and presence of the class will be determined by the data property isActive.

If isActive is true, then the active class will be added to the <div> .

Now to add multiple classes to the same HTML element, we can pass them to the class object. The div element can also have a plain class (here static) along with the v-bind:classs.

Syntax:

<div
  class="static"
  v-bind:class="{ active: isActive, 'roundBorder': hasBorder }"
></div>

In the syntax, we have two classes active and roundBorder with its data property isActive and hasBorder.

The data properties are boolean values that can be toggled to add or remove the class to and from the element.

data(){
  return {
    isActive: true,
    hasBorder: false
  }
}

Let’s see an example to add a dynamic class name in vue.

Add Multiple Classes Dynamically in Vue

First, we will create our HTML block where we want to add multiple dynamic classes.

<template>
  <div id="app">
    <div class="box">
      This is a box
    </div>
  </div>
</template>

Now we will create two CSS classes in our style tag that will add red background and a black border to the div.

<style>
  .redBackground {
    background: red;
  }

  .border {
    border: 5px solid black;
  }
</style>

These two classes will be our dynamic classes that will be bound to our element.

Now after creating the CSS classes, we bind them to our div using v-bind directive.

<template>
  <div id="app">
    <div class="box" :class="{ redBackground: isRed, border: activeBorder }">
      This is a box
    </div>
    <div class="button">
      <button @click="chngBackground()">Red Background</button>
      <button @click="addBorder()">Add Border</button>
      <button @click="clear()">Clear</button>
    </div>
  </div>
</template>

The classes have data properties (isRed and activeBorder) that will let us add or remove those CSS classes to and from the div.

We have also added three buttons with a click event that will let us toggle our data property.

Red Background – add background class
Add Border – add border class to the div
Clear – to remove both the classes from the div.

Now in the script tag, we have initialized the data property of both the classes as false.

<script>
export default {
  name: "App",
  data() { // DATA PROPERTY IS SET TO FALSE AT FIRST
    return {
      isRed: false,
      activeBorder: false,
    };
  },
  methods: { // METHODS TO TOGGLE THE DATA PROPERTIES TO TRUE OR FALSE
    chngBackground() {
      this.isRed = true;
    },
    addBorder() {
      this.activeBorder = true;
    },
    clear() { 
      this.isRed = false;
      this.activeBorder = false;
    },
  },
};
</script>

And when any of the buttons is pressed, it runs the method assigned to it and it will change the property to true.

The clear button is to change both the data property to false again i.e remove the classes from the HTML element.

DEMO: