Simple Calculator Using Vue JS

- May 16, 2022

Simple Calculator Using Vue JS

HTML Codes

<h1>Simple Calculator Using Vue</h1>
    <div id="app">
        <form action="">
            <table>
                <tr>
                    <td>Enter Number 1: </td>
                    <td><input type="text" v-model.number="num1"></td>
                </tr>
                <tr>
                    <td>Enter Number 2: </td>
                    <td><input type="text" v-model.number="num2"></td>
                </tr>
            </table>
        </form>
        <button v-on:click="add()">Add</button>
        <button v-on:click="sub()">Sub</button>
        <button v-on:click="mul()">Mul</button>
        <button v-on:click="div()">Div</button>
        <h1>{{msg}} {{value}}</h1>
    </div>

Two inputs elements are used with v-model.
To convert the input into number, "number" property used with v-model.
Four buttons are used with v-on:click.
The methods which is mentioned as the value for v-on:click in the button will be called when the button is clicked
What is there in the variables msg and value will be displayed as in HTML.

Vue JS Codes

<script>

        const app = new Vue({

            el: '#app',

            data: {

                num1 : '',

                num2 : '',

                value : '',

                msg: ""

},

            methods: {

                add(){

                    this.value = this.num1 + this.num2;

                    this.msg = "The Addition is ";

},

                sub(){

                    this.value = this.num1 - this.num2;

this.msg = "The Subtraction is ";

},

                mul(){

                    this.value = this.num1 * this.num2;

                    this.msg = "The Multiplication is ";

},

                div(){

                    this.value = this.num1 / this.num2;

this.msg = "The Division is ";

}

}

})

    </script>

Initially the values of num1, num2, value, and msg is empty.
Once the button is clicked, according to the method, the function body will get executed.

For Example, When the add() method is called, the inputs are converted into integers and stored according to num1 and num2 and added both the numbers and stored in the value, Same way the msg also updated.

Outputs