Un método Vue es un objeto asociado con la instancia de Vue. Las funciones se definen dentro del objeto de métodos . Los métodos son útiles cuando necesita realizar alguna acción con la directiva v-on en un elemento para manejar eventos. Las funciones definidas dentro del objeto de métodos se pueden llamar para realizar acciones.
Sintaxis:
methods : {
// We can add our functions here
}
Sintaxis para componentes de un solo archivo:
export default {
methods: {
// We can add our functions here
}
}
En los siguientes ejemplos, usamos Vue.js para mostrar el funcionamiento de los métodos.
Ejemplo 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>
Producción:
Aplicación Vue
Ejemplo 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>
Producción:
- Antes de hacer clic en el botón:
antes de hacer clic
- Después de hacer clic en el botón:
Después de hacer clic