Vue.js Basic Syntax Guide: Numeric and String Conversion with Rounding Examples

vue.js numeric and string conversion 

Numeric to String Conversion:

// Numeric to String Conversion
let numericValue = 123;
let stringValue = `${numericValue}`; // String interpolation
// Or
let stringValue = numericValue.toString(); // Using toString() method

 

String to Numeric Conversion:

// String to Numeric Conversion
let stringValue = "123";
let numericValue = parseInt(stringValue); // For integers
// Or
let floatValue = parseFloat(stringValue); // For floats

 

Rounding:

let number = 10.6;

let rounded = Math.round(number); // Rounds to the nearest integer
// Output: 11

let roundedDown = Math.floor(number); // Rounds down to the nearest integer
// Output: 10

let roundedUp = Math.ceil(number); // Rounds up to the nearest integer
// Output: 11

let number = 10.6789;
let decimalPlaces = 2;
let rounded = Math.round(number * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
// Output: 10.68

Template Example:

<template>
  <div>
    <p>Numeric to String Conversion: {{ numericValue.toString() }}</p>
    <p>String to Numeric Conversion: {{ parseInt(stringValue) }}</p>
    <p>Rounded Number: {{ Math.round(number) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numericValue: 123,
      stringValue: "123",
      number: 10.6
    };
  }
};
</script>

 

Result:

<p>Numeric to String Conversion: 123</p>
<p>String to Numeric Conversion: 456</p>
<p>Rounded Number: 11</p>