Vue.js Methods

Last Updated : 10 Sep, 2021

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:

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:

After clicking the button:

Vue.js Event Modifiers

suresh_a

Improve

Article Tags :

Vue.js Methods

Similar Reads

Basics

Transition

Directives

Filters

Routing

Difference Between

Thank You!

What kind of Experience do you want to share?