Vue.js Methods
Last Updated :
10 Sep, 2021
Improve
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:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://unpkg.com/vue">
</script>
</head>
<body>
<div style="text-align: center;" id = "home">
<!-- Rendering data to DOM -->
<h1 style="color: seagreen;">{{title}}</h1>
<h2>Title : {{name}}</h2>
<h2>Topic : {{topic}}</h2>
<!-- Calling function in methods -->
<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>
<html><head> <script src= "https://unpkg.com/vue"> </script></head><body> <div style="text-align: center;" id = "home"> <!-- Rendering data to DOM --> <h1 style="color: seagreen;">{{title}}</h1> <h2>Title : {{name}}</h2> <h2>Topic : {{topic}}</h2> <!-- Calling function in methods --> <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:
Example 2:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://unpkg.com/vue">
</script>
</head>
<body>
<div style="text-align: center;" id = "home">
<!-- Rendering data to DOM -->
<h1 style="color: seagreen;">{{title}}</h1>
<h2>Title : {{name}}</h2>
<!-- Calling function in methods -->
<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>
<html><head> <script src= "https://unpkg.com/vue"> </script></head><body> <div style="text-align: center;" id = "home"> <!-- Rendering data to DOM --> <h1 style="color: seagreen;">{{title}}</h1> <h2>Title : {{name}}</h2> <!-- Calling function in methods --> <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:
- After clicking the button:
