Modificador de número de enlace de entrada de formulario Vue.js

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación en cualquier etapa.

El enlace de valor de entrada de formulario es manejado por la directiva v-model que ayuda a enlazar las strings estáticas, para simplificar el enlace de valor de entrada. El modificador de números maneja la entrada de números automáticamente y cambia la entrada de string a entrada numérica, lo que no requiere que se realice un procesamiento adicional. Esto nos permite almacenar valores como números como el precio de un artículo, etc.

El modificador de número es aplicable al elemento de entrada del tipo de número. Esto no funciona para elementos de entrada de tipo texto . Los modificadores ayudan a modificar la entrada del usuario a un formulario utilizable y en Vue.js, la implementación de modificadores es muy fácil.

Sintaxis: Cambie el elemento de entrada al tipo de modelo v a número de la siguiente manera:

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

Ejemplo : en el siguiente ejemplo, tenemos un elemento de entrada para ingresar números y el número se muestra usando el modelo v . El modificador de número modifica la entrada de string encasillándola al formato de número.

Paso 1: Cree un nuevo proyecto Vue.js con el administrador de paquetes npm node.js usando el siguiente comando.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera:

 

Estructura del proyecto: después de una instalación exitosa, se formará la siguiente estructura del proyecto.

Estructura del proyecto

Paso 2 : en el archivo App.vue, agregue el valor del miembro de datos para almacenar el valor y escriba el elemento de entrada con el modificador de número.

<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>

Paso 3: Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Al construir con éxito el proyecto, abra http://localhost:3000 y el resultado será el siguiente.

Producción:

 

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