Estoy tratando de mostrar la suma de dos números usando VueJs, pero quiero desarrollar este código para que obtenga la suma cuando el usuario haga clic en el botón. ¡por favor, ayúdame!
<!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"> Enter number 1:<input type="number" name="number1" v-model="number1"> <p></p> Enter number 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>Puede agregar un botón "Calcular" y usar la directiva v-on para escuchar el evento de clic:
<!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"> Enter number 1:<input type="number" name="number1" v-model="number1"> <p></p> Enter number 2:<input type="number" name="number2" v-model="number2"> <p></p> <hr> <button v-on:click="result = parseInt(number1) + parseInt(number2)">Calculate</button> <p>TOTAL:{{ result }}</p> </div> <script> new Vue({ el: '#app', data: { number1: 0, number2: 0, result: null, }, }); </script> </body> </html> <!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"> Enter number 1:<input type="number" name="number1" v-model="number1"> <p></p> Enter number 2:<input type="number" name="number2" v-model="number2"> <p></p> <button @click="add()">Sum</button> <hr> <p>TOTAL:{{ result }}</p> </div> <script> new Vue({ el: '#app', data: { number1: 0, number2: 0, result:0 }, methods: { add() { this.result= parseInt(this.number1) + parseInt(this.number2); } } }); </script> </body> </html>