How to Toggle CSS Classes and Styles with Vue.js

Sometimes it is required to control the flow of the CSS classes and style properties of the element based on the expression at runtime.

In Vue.js there is a v-bind directive to update the HTML attribute.

In this tutorial, I am using this on class v-bind:class and style v-bind:style.

The v-bind:class adds and removes classes from the element without affecting the value of the class attribute.

In the demonstration, I am using the v-bind directive to dynamically toggle CSS class and style property from the element on a click.

How to Toggle CSS classes and styles with Vue.js


Contents

  1. Download and Include
  2. HTML
  3. CSS
  4. Script
  5. Demo
  6. v-bind:style
  7. Conclusion

 


 

1. Download and Include

  • Download Vue.js library from here or you can use CDN. Include the <script > in <head> section.
<script src='https://cdn.jsdelivr.net/npm/vue'></script>

 

2. HTML

Create two <div> in the <div id='myapp'>.

On the <div class='div'> add v-bind:class and define @click event which calls toggleClass() method.

In the second <div> I use @click='isActive = !isActive'.

In the v-bind:class I am using Array syntax to toggle class according to the isActive value using trinary operator.

The value of isActive is managed from the <script >.

Completed Code

<div id='myapp'>
 
  <!-- div 1 -->
  <div class='div' v-bind:class="[isActive ? 'red' : 'blue']" @click="toggleClass()"></div>

  <!-- div 2 -->
  <div class='div' v-bind:class="[isActive ? 'blue' : 'red']" @click="isActive = !isActive"></div>

</div>

 

3. CSS

Here, is the CSS classes which I used above.

.red{
  background: red;
}

.blue{
  background: blue;
}

.div{
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid black;
}

 

3. Script

Create an instance of Vue where define a single variable isActive: true in data option.

Define a method toggleClass().

This method call from the <div class='div'> on click.

From this method update isActive value. If it is true then assign false otherwise true.

Completed Code

var app = new Vue({
  el: '#myapp',
  data: {
    isActive: true
  },
  methods: {
    toggleClass: function(event){
       // Check value
       if(this.isActive){
         this.isActive = false;
       }else{
         this.isActive = true;
       }

    }
  }
})

 

4. Demo

Click on the box.


 

5. v-bind:style

You can use v-bind:style to toggle only CSS property in the style attribute instead of a class.

Syntax – 

v-bind:style='{property-name: expression,...}'

In the example, create two <div > where define v-bind:style to set background-color property according to isActive value.

The script is same as above example only change the el: "#app2".

Completed Code

<div id='app2'>
 
  <!-- div 1 -->
  <div class='div' v-bind:style='{"background-color" : (isActive? "orange" : "yellow" )}' @click="toggleClass()"></div>

  <!-- div 2 -->
  <div class='div' v-bind:style='{"background-color": (isActive? "yellow" : "orange" )}' @click="isActive = !isActive"></div>;

</div>

<!-- Script -->
<script>

var app = new Vue({
  el: '#app2',
  data: {
    isActive: true
  },
  methods: {
    toggleClass: function(){
 
      // Check value
      if(this.isActive){
        this.isActive = false;
      }else{
        this.isActive = true;
      }

    }
  }
})

</script>

Demo

Click on the box.


 

6. Conclusion

Use trinary operator in the v-bind:class to toggle CSS class on the element.

If you only want to toggle values of some CSS properties according to expression then you can use v-bind:style.

If you like this post then don’t forget to share.

Related Post

Spread the love
  •  
  • 1
  •  
  •  
  •  
  •  
  •  

2 Comments

  1. RonnieSan said:

    Instead of creating a toggleClass method, you could just do `@click=”isActive = !isActive”`.

    January 26, 2018
    Reply
    • Yogesh Singh said:

      Hi RonnieSan,
      Thanks for mention it.
      I updated the tutorial and used in the examples.

      January 26, 2018
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *