Vue Js Mouseover Event Example Tutorial

Vue · 05-Mar-2021

Hi Guys

In this example, i will explain you how to use mouseover event in vue js,i will show example of vue js mouseover event. you can easliy use mouseover event in vuejs.we will describing mouseover in vue js.

Here, I will give you full example for simply display vue js mouseover event example as bellow.

Script Code

<script type="text/javascript">
  var demo = new Vue({
    el: '#demo',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;   
        }
    }
});
</script>

Full Example

<!DOCTYPE html>
<html>
<head>
    <title>Vue Mouse Over Event Element Example - nicesnippets.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="demo">
        <div v-show="active">Show</div>
        <div @mouseover="mouseOver">Hover over me!</div>
    </div>
</body>
<script type="text/javascript">
  var demo = new Vue({
    el: '#demo',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;   
        }
    }
});
</script>
</html>

It will help you...