Vue.js Methods Last Updated : 10 Sep, 2021 Comments Improve Suggest changes Like Article Like Report 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= "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: Vue App Example 2: HTML <!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> Output: Before clicking the button: Before clickAfter clicking the button: After click Comment More infoAdvertise with us S suresh_a Follow Improve Article Tags : JavaScript Web Technologies Vue.JS Explore JavaScript Tutorial 8 min read JavaScript BasicsIntroduction to JavaScript 4 min read JavaScript Versions 2 min read How to Add JavaScript in HTML Document? 3 min read JavaScript Syntax 6 min read JavaScript Output 4 min read JavaScript Comments 2 min read JS Variables & DatatypesVariables and Datatypes in JavaScript 6 min read Global and Local variables in JavaScript 4 min read JavaScript Let 6 min read JavaScript const 5 min read JavaScript Var Statement 7 min read JS OperatorsJavaScript Operators 5 min read Operator precedence in JavaScript 2 min read JavaScript Arithmetic Operators 5 min read JavaScript Assignment Operators 5 min read JavaScript Comparison Operators 5 min read JavaScript Logical Operators 5 min read JavaScript Bitwise Operators 5 min read JavaScript Ternary Operator 4 min read JavaScript Comma Operator 2 min read JavaScript Unary Operators 4 min read JavaScript in and instanceof operators 3 min read JavaScript String Operators 3 min read JS StatementsJavaScript Statements 4 min read JavaScript if-else 3 min read JavaScript switch Statement 4 min read JavaScript Break Statement 2 min read JavaScript Continue Statement 1 min read JavaScript Return Statement 4 min read JS LoopsJavaScript Loops 3 min read JavaScript For Loop 4 min read JavaScript While Loop 3 min read JavaScript For In Loop 3 min read JavaScript for...of Loop 3 min read JavaScript do...while Loop 4 min read JS Perfomance & DebuggingJavaScript | Performance 4 min read Debugging in JavaScript 4 min read JavaScript Errors Throw and Try to Catch 2 min read JS ObjectObjects in Javascript 4 min read Object Oriented Programming in JavaScript 3 min read JavaScript Objects 6 min read Creating objects in JavaScript 5 min read JavaScript JSON Objects 3 min read JavaScript Object Reference 4 min read JS FunctionFunctions in JavaScript 4 min read How to write a function in JavaScript ? 4 min read JavaScript Function Call 2 min read Different ways of writing functions in JavaScript 3 min read Difference between Methods and Functions in JavaScript 3 min read Explain the Different Function States in JavaScript 3 min read JavaScript Function Complete Reference 3 min read JS ArrayJavaScript Arrays 7 min read JavaScript Array Methods 7 min read Best-Known JavaScript Array Methods 6 min read Important Array Methods of JavaScript 7 min read JavaScript Array Reference 4 min read Like