A Vue method is an object associated with the Vue instance. Functions are defined inside the methods object. Methods are useful when you need to perform some action with v-on directive on an element to handle events. Functions defined inside the methods object can be further called for performing actions.
Syntax:
methods : {
// We can add our functions here
}
Syntax for single file components:
export default {
methods: {
// We can add our functions here
}
}
In the following examples, we use Vue.js to show the working of methods.
Example 1:
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< div style = "text-align: center;" id = "home" >
< h1 style = "color: seagreen;" >{{title}}</ h1 >
< h2 >Title : {{name}}</ h2 >
< h2 >Topic : {{topic}}</ h2 >
< h2 >{{show()}}</ h2 >
</ div >
</ body >
< script type = "text/javascript" >
// Creating Vue Instance
var vm = new Vue({
// Assigning id of DOM in parameter
el: '#home',
// Assigning values of parameter
data: {
title : "Geeks for Geeks",
name : "Vue.js",
topic : "Instances"
},
// Creating methods
methods : {
// Creating function
show: function(){
return "Welcome to this tutorial on "
+ this.name + " - " + this.topic;
}
}
});
</ script >
</ html >
|
Output:
Vue App
Example 2:
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< div style = "text-align: center;" id = "home" >
< h1 style = "color: seagreen;" >{{title}}</ h1 >
< h2 >Title : {{name}}</ h2 >
< button @ click = "show()" >Click me</ button >
< h2 id = "view" ></ h2 >
</ div >
</ body >
< script type = "text/javascript" >
// Creating Vue Instance
var vm = new Vue({
// Assigning id of DOM in parameter
el: '#home',
// Assigning values of parameter
data: {
title : "Geeks for Geeks",
name : "Vue.js | Methods",
},
// Creating methods
methods : {
// Creating function
show: function(){
// Setting text in element
document.getElementById("view")
.innerHTML = "Hi, This is Vue"
// Hiding text after 2 seconds
setTimeout(() => {
document.getElementById("view")
.innerHTML = ""
}, 2000);
}
}
});
</ script >
</ html >
|
Output:
- Before clicking the button:
Before click
- After clicking the button:
After click
Last Updated :
10 Sep, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...