Vuejs Adding Removing Toggling Classes Example

Today, We want to share with you Vuejs Adding Removing Toggling Classes Example.In this post we will show you vuejs change css class property, hear for How to Toggle CSS Classes and Styles with Vue.js we will give you demo and example for implement.In this post, we will learn about Adding, Removing & Toggling Classes With classList in vuejs with an example.

Vuejs Adding Removing Toggling Classes Example

There are the Following The simple About Vuejs Adding Removing Toggling Classes Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop vue.js toggle between two classes, so the vue.js Get and Set CSS Classes for this example is following below.

Also Read This πŸ‘‰   Angular 7|8|9 Validate Mobile number With 10 Digits Example

Step 1: Include vuejs library

At first we need to include vuejs Latest library file.

<script src='https://cdn.jsdelivr.net/npm/vue'></script>

Free Live Chat for Any Issue

Step 2: JavaScript/vuejs Source Code:

This file All the Data contains the following JavaScript/vuejs Source codes.

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

    }
  }
})

Step 3: HTML Source Code:

This file contains the following HTML Markup Source codes.

<div id='shopApp'>
 
  <!-- first div 1 Data contains-->
  <div class='div' v-bind:class="[isCurrent ? 'red' : 'blue']" @click="toggleClass()"></div>

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

</div>

Step 4: CSS Source Code

Following CSS Source codes are used for #######.

Also Read This πŸ‘‰   Login with Facebook and Twitter using PHP

.red{
  background: red;
}

.blue{
  background: blue;
}

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

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vuejs Adding Removing Toggling Classes Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Rate this post