How To Add Multiple Classes in VueJS | Class Binding


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

We can add more then 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 use for data binding that lets us to 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 simple use :class

In the above syntax, we have bind a class named active and presence of the class will be determine 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 property are boolean value which can be toggle to add or remove the class to and from the element.

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

Lets see an example to add 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>

This two classes will be our dynamic class that will be bind 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 property (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 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 initialise 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 button is pressed , it run the method related 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:

Related Topics:

How To Add Dynamic HTML Attributes In VueJS ?

How To Add Common Header And Footer In Vuejs.


💾 Recommended Articles