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

Hotel Management System using Laravel 11

Relationships: Hotel ↔ Rooms (One-to-Many) A hotel can have many rooms, but a room belongs…

3 weeks ago

Creating Grocery Inventory App Using React

Introduction to Grocery Inventory Apps Managing grocery inventory can be a daunting task, but with…

4 weeks ago

Fish Inventory Shop Management System in Angular

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

1 month ago

Fish Inventory Management with React

Introduction to Fish Inventory Management In the aquaculture industry, managing fish inventory is crucial for…

1 month ago

Java GUI CRUD for Beginners

Introduction to Java GUI CRUD Java is a powerful programming language widely used for building…

1 month ago

Creating Beautiful Login Form Design Using React

Introduction to Login Form Design Designing an effective and beautiful login form is crucial for…

1 month ago