in this tutorials will teach how to add two numbers in vue js.
Html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <template> <div class="container"> <h2>Add Two Numbers</h2> <div class="form-group"> <label>Number 1</label> <input v-model="adddata.number1" type="text" class="form-control"> </div> <div class="form-group"> <label>Number 2</label> <input v-model="adddata.number2" type="text" class="form-control" > </div> <div class="form-group"> <label>Total</label> <input v-model="adddata.number2" type="text" class="form-control" > <h3>{{ total }}</h3> </div> </div> </template> |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script> export default { name: 'AddNumber', data () { return { result: {}, adddata:{ number1: '', number2: '' } } }, computed: { total:function() { return parseInt(this.task.num1) + parseInt(this.task.num2); } } } </script> |
i have attached the video link below. which will do this tutorials step by step
