Vue.js Methods

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:

 
 

Output:

 

👁 Image

 

Example 2:

 

 
 

Output:

 

• Before clicking the button: 
   

👁 Image

• After clicking the button: 
   

👁 Image