How to subtract two numbers in VueJS?

Hi Friends 👋,

Welcome To Sortoutcode! ❤️

To subtract two numbers in vue.js, use the - operator it will subtract if your value datatype is a number else if your value datatype is string first convert it using Number() and then perform the subtraction operation.

In the following example, we will take the sample numbers, and strings and perform a subtraction operation using the - subtraction operator.

Subtracting Two numbers example

let num1 = 20;
let num2 = 25;
num2 - num1; // 5

Subtracting Two string numbers example

let num1 = "20";
let num2 = "25";
parseInt(num2) - parseInt(num1); // 5

Setup the Vue.js

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, which will show you step by step process of installation.

How to Install the VueJS project?

After the vue.js project setup, I’m going to show you How do subtract two numbers in vuejs, as mentioned above here, I’m going to use the - subtraction operator.

Let’s start today’s tutorial on how do you subtract two numbers in vue.js?

In this example, we will do

• take an example of a number and string number data() function
• Subtracting two numbers example
• Subtracting two string numbers example
• print the output on the page screen

FirstComponent.vue

<template>
    <div>
        <h1>Subtracting two numbers example</h1>
        <input type="number" v-model.number="firstNum" /> -
        <input type="number" v-model.number="secondNum" /> = 
        <span>{{ firstNum - secondNum }}</span>
        <h1>Subtracting two string numbers example</h1>
        <input type="number" v-model="firstStr" /> -
        <input type="number" v-model="secondStr" /> = 
        <span>{{ Number(firstStr) - Number(secondStr) }}</span>
    </div>
</template>

<script>
export default {
    name: "FirstComponent",
    data() {
        return {
            firstNum: "",
            secondNum: "",
            firstStr: "",
            secondStr: "",
        }
    }
};
</script>

In the above vue js example, we have taken the sample numbers and string numbers data(), and performed subtracting two numbers example, and subtracting two string numbers example.

Output

I hope it helps you, All the best 👍.