How To Add Class To Element On Clicked In Vue Js

Hi,

Today, i we will show you how to add class to element on clicked in Vue Js. This article will give you simple example of how to add class to element on clicked in Vue Js. you will learn how to add class to element on clicked in Vue Js.

So let’s follow few step to create example of how to add class to element on clicked in Vue Js.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>How To Add Class To Element On Clicked In Vue Js</title>
  <style>
   .newClass
    {
      box-shadow: 0px 0px 5px #000; 
      background-color: green;
      color: #fff;
      padding: 3px 5px;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-5 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5>How To Add Class To Element On Clicked In Vue Js</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <div id="app">
                  <button v-on:click="addClass" :class="{'newClass': isAddClass}" class="btn-block">
                      Click Me
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
Vue.config.devtools = true
var vm = new Vue({
    el: '#app',
    data: {
        isAddClass: false,
    },
    methods: {
            addClass: function() {
                this.isAddClass = true;
        }
    }
});
</script>
</body>
</html>

I hope it will assist you…

How To Add Class To Element On Clicked In Vue Js

Example:

Recommended Posts

Random Post