How to check value is a number or not in VueJS?
June 13, 2022Hi Friends 👋,
Welcome To SortoutCode! ❤️
Today I am going to show you How do you check value is a number or not in VueJS.
Javascript provides multiple ways to check value is a number or not isNaN(),Number.isFinite(), and typeof() methods are some of those.
Table of Content
- Define value for test
- Using isNaN() Method
- Using Number.isFinite() Method
- Using typeof() Method
Let’s start the today’s tutorial How do I check value is a number or not in VueJS?
1. Define value with number value for test
Let’s define the ‘value’ in data of the FirstComponent.vue component for testing purposes.
<script>
export default {
name: 'FirstComponent',
data() {
return{
value:786,
}
},
}
</script>Data is used to define properties in a particular component. In a single-file component, data() is a function that returns a set of properties that have been defined in the function.
we define the one property that is value.
2. Using isNaN Method
The isNaN() determines whether a value is NaN or not. We can take advantage of this to determine whether a variable is number type or not.
<template>
<div>
<h1>Welcome to SortoutCode</h1>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
data(){
return{
value:786,
}
},
mounted(){
// number
console.log(isNaN(this.value)); //false
// object
console.log(isNaN({})); //true
// float
console.log(isNaN(1.2)); //false
// string
console.log(isNaN('infinitbility')); //true
}
}
</script>For now, let’s check the output of isNaN() method.
Output
3. Using Number.isFinite() Method
The function isFinite() determines if the passed value is finite. The arguments are first converted to numbers and then checks if the value is finite.
<template>
<div>
<h1>Welcome to SortoutCode</h1>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
data(){
return{
value:786,
}
},
mounted(){
if(Number.isFinite(this.value) ){
console.log('It is a number')
}
else
{
console.log('It is not a number')
}
}
}
</script>For now, let’s check the output of Number.isFinite() method.
Output
We can check the output with another type of data,
<template>
<div>
<h1>Welcome to SortoutCode</h1>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
data(){
return{
value:786,
}
},
mounted(){
console.log(Number.isFinite(this.value)); // returns true
console.log(Number.isFinite('Hello')); // returns false
console.log(Number.isFinite(undefined)); // returns false
console.log(Number.isFinite(true)); // returns false
console.log(Number.isFinite(null)); // returns false
}
}
</script>For now, let’s check the output with the other datatype value of Number.isFinite() method.
Output
4. Using typeof()
Javascript provides the type of operator to check the type of data, when we pass any number, float then type of return number.
<template>
<div>
<h1>Welcome to SortoutCode</h1>
</div>
</template>
<script>
export default {
name: 'FirstComponent',
data(){
return{
value:786,
}
},
mounted(){
if(typeof this.value === 'number' ){
console.log('It is a number')
}
else
{
console.log('It is not a number')
}
}
}
</script>For now, let’s check the output typeof() of the method.
Output
All the best 👍.