Categories: Uncategorized

Add Two Numbers in Vue Js

in this tutorials will teach how to add two numbers in vue js.

Html

   <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

<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

 

admin

Recent Posts

Login Form Using React

How to make a Login Form in React Step by Step. (more…)

3 hours ago

Building Functional Calculator in React for Beginners

Introduction to React Calculator Creating a functional calculator in React is an excellent way to…

1 day ago

How to Create Functional Calculator in React

Introduction to React Calculator Creating a functional calculator in React is an excellent way to…

2 days ago

Inventory Management System Angular Step by Step

This article explain how to make a Inventory Management App in Angular.this app explain the…

4 days ago

Creating Java Swing Login Application with Validation

Introduction to Java Swing Java Swing is a versatile toolkit for building graphical user interfaces…

4 days ago

React Inventory Management System Project

Inventory Management App in React.this app explain the complete module of the Inventory sales management system in React…

6 days ago