Vue Click Event Element Example

Vue · 02-Mar-2021

Hi Guys,

Today, I will learn you how to use on click event element in vue. we will show basic example of vue on click event element. you can easily use vue on click event element. We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. v-on is the attribute added to the DOM elements to listen to the events in VueJS.

Here, I will give you full example for vue click event element as bellow.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Vue Click Event Element Example - nicesnippets.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="example-1">
    <h2>Vue Click Event Element Example</h2>
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
  </div>
</body>
<script type="text/javascript">
  var example1 = new Vue({
    el: '#example-1',
    data: {
      counter: 0
    }
  })
</script>
</html>

It will help you...