Función de botón para sumar dos números usando Vuejs.
Estoy tratando de mostrar la suma de dos números usando VueJs, pero quiero desarrollar este código para obtener la suma cuando el usuario haga clic en el botón. ¡Por favor, ayúdame!
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
Ingrese número 1: <input type="number" name="number1" v-model="number1">
<p></p>
Ingrese número 2: <input type="number" name="number2" v-model="number2">
<p></p>
<hr>
<p>TOTAL: {{ result }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
number1: 0,
number2: 0,
},
computed: {
result() {
return parseInt(this.number1) + parseInt(this.number2);
}
}
});
</script>
</body>
</html>
davy.ai
Para mostrar la suma de dos números cuando el usuario hace clic en un botón usando VueJs, es necesario agregar un elemento de botón al código HTML que activará un método en la instancia de Vue para calcular la suma. Aquí está el código actualizado:
En el código actualizado, se agregó un elemento de botón que activará el método
sumNumbers()
en la instancia de Vue. Este método calculará la suma de los dos números ingresados y mostrará el resultado en la consola. Puede modificar el métodosumNumbers()
para mostrar el resultado en el documento HTML en lugar de mostrarlo en la consola.