Vue.js Form Input Binding number Modifier

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stage.

Form Input Value Binding is handled by the v-model directive that helps to bind the static strings, to simplify the input value binding. The Number Modifier handles the number input automatically and changes the string input to numerical input, which does not require further processing need to be done. This enables us to store values as numbers like the price of an item, etc.

The number modifier is applicable to the input element of the number type. This does not work for input elements of text type. The Modifiers help to modify the input from the user to a usable form and in Vue.js, the implementation of modifiers is very easy.

Syntax: Change the input element to the type of v-model to number as follows:

<input type="number" v-model.number="value" />

Example: In the following example, we have an input element to input numbers and the number is displayed using the v-model. The number modifier modifies the string input by typecasting to the number format.

Step 1: Create a new Vue.js project with the npm node.js package manager using the following command.

npm init vue@latest

Enter the project name and preset the project as follows:

Project Structure: After successful installation, the following project structure will be formed.

Project Structure

Step 2: In the App.vue file, add the data member value to store the value in and write the input element with the number modifier.

App.vue

<script>
  export default {
    data() {
      return {
        value: 0,
      };
    },
  };
</script>

<template>
  <center>
    <h1 style="text-align: center;
        color: green">
       GeeksforGeeks
    </h1>
    <strong>
        Vue.js Form Input Binding number Modifier
    </strong>
    <br />
  </center>
  <center>
    <p>Numerical value: {{ value }}</p>
    <input type="number"
           v-model.number="value" />
  </center>
</template>

Step 3: Run the project using the following command and see the output.

npm run dev

On successfully building the project, open http://localhost:3000, and the result will be as follows.

Output:

Reference: https://vuejs.org/guide/essentials/forms.html#number