I’m trying to display the sum of two numbers using VueJs, but I want to develop this code so it would get the sum when the user clicks the button. please help me!
JavaScript
x
34
34
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<title>Document</title>5
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>6
</head>7
<body>8
9
<div id="app">10
Enter number 1:<input type="number" name="number1" v-model="number1">11
<p></p>12
Enter number 2:<input type="number" name="number2" v-model="number2">13
<p></p>14
<hr>15
<p>TOTAL:{{ result }}</p>16
</div>17
18
<script>19
new Vue({20
el: '#app',21
data: {22
number1: 0,23
number2: 0,24
},25
computed: {26
result() {27
return parseInt(this.number1) + parseInt(this.number2);28
29
}30
}31
});32
</script>33
</body>34
</html>Advertisement
Answer
JavaScript
1
36
36
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<title>Document</title>5
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>6
</head>7
<body>8
9
<div id="app">10
Enter number 1:<input type="number" name="number1" v-model="number1">11
<p></p>12
Enter number 2:<input type="number" name="number2" v-model="number2">13
<p></p>14
<button @click="add()">Sum</button>15
<hr>16
<p>TOTAL:{{ result }}</p>17
</div>18
19
<script>20
new Vue({21
el: '#app',22
data: {23
number1: 0,24
number2: 0,25
result:026
},27
methods: {28
add() {29
this.result= parseInt(this.number1) + parseInt(this.number2);30
31
}32
}33
});34
</script>35
</body>36
</html>