Modificador de recorte de enlace de entrada de formulario Vue.js

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco versátil que proporciona alta velocidad y rendimiento. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa.

El enlace de entrada se utiliza para sincronizar y mantener el estado de los elementos de entrada del formulario con el estado correspondiente en javascript. Entonces, Vue.js proporciona una directiva de modelo v que facilita la tarea de mantener el estado de los formularios mediante una implementación simple.

El modificador de recorte Input Binding elimina automáticamente el espacio en blanco de la entrada del usuario. Recorta el contenido del texto eliminando el espacio en blanco antes del texto y después del final del texto. Funciona con cualquier elemento de entrada.

Sintaxis : agregue el modificador .trim al final del modelo v al elemento de su elección de la siguiente manera:

<input type="text" placeholder="Write here!" v-model.trim="message" />

Ejemplo : en el siguiente ejemplo, tenemos el elemento de entrada con el modificador de recorte.

Paso 1: Cree un nuevo proyecto Vue.js utilizando el administrador de paquetes npm node.js.

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: dentro del archivo App.vue , agregue el mensaje del miembro de datos que se usará para el modelo v en la sección de datos del archivo de secuencia de comandos. El modelo v utiliza un miembro de datos para vincular los datos y es muy simple de implementar.

Aplicación.vue:

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
}
</script>

Paso 3: ahora, en la sección de plantilla , agregue el elemento de entrada con un elemento de párrafo para mostrar el mensaje que se está escribiendo. Dentro del elemento de entrada, mencione el modelo v donde especificaremos el miembro de datos que definimos anteriormente.

Aplicación.vue:

<template>
  <center>
    <h1 style="text-align: center; 
        color: green">
        GeeksforGeeks
   </h1>
    <strong>
        Vue.js Form Input Value Binding trim modifier
    </strong>
    <br />
  </center>
  <center>
    <p>Content with trim modifier</p>
        {{ message }}
    <br />
    <input type="text" 
           placeholder="Write here!" 
           v-model.trim="message" />
  </center>
</template>

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

npm run dev

Salida: Ejecutará el proyecto en http://localhost:3000/ y el resultado será el siguiente:

 

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