Skip to content
Related Articles

Related Articles

Vue.js Methods
  • Last Updated : 14 Sep, 2020

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({
  
        // Assiging 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 click

  • After clicking the button:

    After click

My Personal Notes arrow_drop_up
Recommended Articles
Page :