es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Función de botón para sumar dos números usando Vuejs.

31 Jul, 2023 Programación

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>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
<body>

<div id="app">
    Ingrese el número 1: <input type="number" name="number1" v-model="number1">

    Ingrese el número 2: <input type="number" name="number2" v-model="number2">

    <button v-on:click="sumNumbers">Obtener Suma</button>
    <hr>
    TOTAL:{{ result }}
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    number1: 0,
    number2: 0,
  },
  computed: {
    result() {
      return parseInt(this.number1) + parseInt(this.number2);
    }
  },
  methods: {
    sumNumbers() {
      console.log(this.result); // mostrar la suma en la consola
    }
  }
});
</script>
</body>
</html>

    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étodo sumNumbers() para mostrar el resultado en el documento HTML en lugar de mostrarlo en la consola.

Comments are closed.