bind:value para entradas de texto
Mantenga automáticamente sincronizados los valores de las entradas de texto con las variables del componente
bind:value para entradas de texto es una lección gratuita de Sveltejs 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 Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Qué hace bind:value
La directiva bind:value crea una conexión bidireccional entre una variable y un campo de formulario.
Ejemplo básico
Asocie una variable declarada con let a un campo de texto. Al escribir se actualiza la variable; los cambios programáticos actualizan el campo.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Forma abreviada
Si la variable y el atributo tienen el mismo nombre, omita el lado derecho.
<input bind:value />Campos numéricos
Para type="number", Svelte convierte automáticamente el valor en un número.
<input type="number" bind:value={age} />Campos de rango
Los controles deslizantes funcionan de la misma manera y también convierten el valor en un número.
<input type="range" bind:value={volume} />Áreas de texto
Asocie value en las áreas de texto igual que en los campos de entrada.
<textarea bind:value={comment}></textarea>Selección individual
Para un <select> individual, asocie value al valor de la opción seleccionada.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Actualización programática
Asignar un valor a la variable asociada actualiza el campo de entrada inmediatamente. Resulta útil para los botones que borran formularios.
function clear() { name = ""; }No se necesitan nuevos renderizados
La reactividad es automática. Nunca necesita llamar a setState ni volver a asociar los valores manualmente.
Validación
Añada declaraciones reactivas para validar mientras el usuario escribe.
$: isValid = email.includes("@");Debounce
Para validaciones costosas, aplique debounce dentro de una declaración reactiva o use una utilidad como lodash.debounce.
Comprobación rápida
¿Qué hace bind:value?
Resumen
Use bind:value para asociar bidireccionalmente un campo de entrada, con conversión automática de tipos en campos numéricos y de rango.
Preguntas frecuentes
¿La lección «bind:value para entradas de texto» es gratis?
Sí — el texto completo de «bind:value para entradas de texto» 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 Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «bind:value para entradas de texto»?
Mantenga automáticamente sincronizados los valores de las entradas de texto con las variables del componente Practicas Sveltejs 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 Sveltejs Academy?
No se requiere experiencia previa. Sveltejs 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 «bind:value para entradas de texto»?
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 Sveltejs Academy?
Sí. Cada lección de Sveltejs 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
- bind:value para entradas de texto
- bind:checked para casillas de verificación
- bind:group para grupos de botones de opción y casillas
- bind:this para referencias a elementos del DOM