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"> <!-- 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:
Vue App
Example 2:
HTML
<!DOCTYPE html><html><head> <script src= </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:
Before click
- After clicking the button:
After click
