Vue Academy · Lección

v-model en todos los elementos de formulario

Input, textarea, select, checkbox y radio: cómo se adapta v-model a cada tipo de elemento.

v-model en todos los elementos de formulario es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Vincular controles de formulario

v-model crea un enlace bidireccional entre los controles del formulario y su estado reactivo. Cada tipo de control —texto, casilla de verificación, botón de opción, select y textarea— usa v-model de una forma ligeramente distinta. En esta lección se explican todos.

Entrada de texto

En una entrada de texto, v-model enlaza el valor y lo actualiza al introducir datos. Escriba en el campo y la ref se actualizará en tiempo real.

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

<template>
  <input v-model="name" />
  <p>Hello, {{ name }}</p>
</template>

Textarea

Un textarea funciona igual que una entrada de texto. Use v-model directamente en el elemento; no coloque texto entre las etiquetas.

<template>
  <textarea v-model="message"></textarea>
</template>

Casilla de verificación: booleano

Una sola casilla de verificación enlazada a una ref booleana alterna entre true y false.

<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>

<template>
  <input type="checkbox" v-model="agreed" />
  <p>Agreed: {{ agreed }}</p>
</template>

Casillas de verificación: varias en un array

Enlace varias casillas de verificación a la misma ref de array. Cada casilla marcada añade su value al array.

<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>

<template>
  <input type="checkbox" value="reading" v-model="hobbies" />
  <input type="checkbox" value="coding" v-model="hobbies" />
  <p>{{ hobbies }}</p>
</template>

Botones de opción

Los botones de opción de un grupo comparten una sola ref. La ref contiene el value de la opción seleccionada.

<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>

<template>
  <input type="radio" value="small" v-model="picked" />
  <input type="radio" value="large" v-model="picked" />
  <p>Picked: {{ picked }}</p>
</template>

Select: uno solo

Un select individual se enlaza a un valor que coincide con la opción elegida. Si lo desea, proporcione una opción de marcador de posición con un valor vacío.

<script setup>
import { ref } from 'vue'
const city = ref('')
</script>

<template>
  <select v-model="city">
    <option value="">Choose</option>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

Select: varias opciones

Añada el atributo multiple y realice el enlace a un array. Las opciones seleccionadas se recopilan en el array.

<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>

<template>
  <select v-model="cities" multiple>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

Modificadores de valor

Los modificadores ajustan v-model: .trim elimina los espacios en blanco, .number convierte el valor en un número y .lazy sincroniza al cambiar en lugar de hacerlo con cada pulsación de tecla.

<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />

Un único modelo mental

Independientemente del control, v-model recibe un valor y emite los cambios. El tipo de control solo determina la forma que adopta el valor: un booleano, una cadena o un array.

Componentes de entrada personalizados

v-model también funciona en sus propios componentes. Una entrada personalizada declara una prop modelValue y emite update:modelValue, por lo que se comporta como un control nativo para su componente padre.

<!-- parent -->
<MyTextInput v-model="name" />

<!-- child declares modelValue + emits update:modelValue -->

Comprobación rápida

Compruebe sus conocimientos sobre el enlace de formularios.

Resumen

v-model en los controles de formulario:

Las entradas de texto y los textarea enlazan una cadena.
Una sola casilla de verificación enlaza un booleano; varias casillas enlazan un array.
Los botones de opción comparten una ref que contiene el valor seleccionado.
Select enlaza un valor; con multiple enlaza un array.
Modificadores: .trim, .number, .lazy.

Preguntas frecuentes

¿La lección «v-model en todos los elementos de formulario» es gratis?

Sí — el texto completo de «v-model en todos los elementos de formulario» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «v-model en todos los elementos de formulario»?

Input, textarea, select, checkbox y radio: cómo se adapta v-model a cada tipo de elemento. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «v-model en todos los elementos de formulario»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

v-model en todos los elementos de formulario
Envío y restablecimiento de formularios
Patrones de validación manual
VeeValidate para validación basada en esquemas

← Volver a Vue Academy