Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to call a function with Mouse hover in VueJS?
While hovering over a div or an element sometimes we require to display some information. This information or data is displayed while hovering over it with the mouse. Therefore, to display this data, we basically use the JS function @mouseover to display data.
In the above specific case, we will make the mouseover function which will return data on hover. Please look at the below example for more clarification.
Syntax
Following is the syntax to call a function with mouse hover in Vue.js −
mouseOver: function(){
this.active = !this.active;
}
Here mouseOver is the function to be called with mouse hover. When an HTML element triggers an event that calls this function, the function will toggle the value of a property called "active" in the object that called the function.
If the "active" property is currently false, the function will set it to true. If it's currently true, the function will set it to false.
Example
Create two files app.js and index.html in your Vue project. The file and directory with code snippets are given below for both files. Copy paste the below code snipped in your vue project and run the vue project. You shall see the below output on the browser window.
FileName - app.js
Directory Structure -- $project/public -- app.js
// Calling the mouseover function on hover
var demo = new Vue({
el: '#demo',
data: {
active: false
},
methods: {
mouseOver: function(){
this.active = !this.active;
}
}
});
FileName - index.html
Directory Structure -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else directive
</title>
<!-- Load Vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<p v-show="active" style="text-align: center;">Hi... you hovered on the text !</p>
<h1 @mouseover="mouseOver" style="text-align: center;">Hover over me!</h1>
</div>
<template id="child">
<input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>
<script src='app.js'></script>
</body>
</html>
Run the following command to get the below output −
C://my-project/ > npm run serve
Complete Code
Here is a combined code from the above two files- app.js and index.html. Now, we can execute this code as an HTML program.
<!DOCTYPE html>
<html>
<head>
<title> VueJS | v-else directive </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<p v-show="active" style="text-align: center;">Hi... you hovered on the text !</p>
<h1 @mouseover="mouseOver" style="text-align: center;">Hover over me!</h1>
</div>
<template id="child">
<input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>
<script>
// Calling the mouseover function on hover
var demo = new Vue({
el: '#demo',
data: {
active: false
},
methods: {
mouseOver: function() {
this.active = !this.active;
}
}
});
</script>
</body>
</html>
In this article, we demonstrated to call a function with mouse hover in Vue.js. To do this task, we two files app.js and index.html, and added the app.js file in the index.html file using <script> tag. Finally, we created a complete code by combining app.js and index.html as an HTML file.
2K+ Views
