bind:value pour les saisies de texte
Synchronisez automatiquement les valeurs saisies avec les variables du composant.
bind:value pour les saisies de texte est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Fonctionnement de bind:value
La directive bind:value crée une liaison bidirectionnelle entre une variable et un champ de formulaire.
Exemple de base
Liez une variable déclarée avec let à un champ de texte. La saisie met à jour la variable, et les modifications programmatiques mettent à jour le champ.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Raccourci
Si la variable et l’attribut portent le même nom, vous pouvez omettre le côté droit.
<input bind:value />Champs numériques
Pour type="number", Svelte convertit automatiquement la valeur en nombre.
<input type="number" bind:value={age} />Champs de plage
Les curseurs fonctionnent de la même manière et convertissent également la valeur en nombre.
<input type="range" bind:value={volume} />Zones de texte
Liez value aux zones de texte comme vous le feriez avec des champs.
<textarea bind:value={comment}></textarea>Sélection unique
Pour un élément <select> unique, liez value à la valeur de l’option sélectionnée.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Mise à jour programmatique
L’affectation d’une valeur à la variable liée met immédiatement à jour le champ. C’est utile pour les boutons d’effacement de formulaire.
function clear() { name = ""; }Aucun nouveau rendu nécessaire
La réactivité est automatique. Vous n’appelez jamais setState et ne recréez jamais la liaison manuellement.
Validation
Ajoutez des instructions réactives pour valider les données au fur et à mesure de la saisie.
$: isValid = email.includes("@");Temporisation
Pour une validation coûteuse, ajoutez une temporisation dans une instruction réactive ou utilisez un utilitaire comme lodash.debounce.
Vérification rapide
Que fait bind:value ?
Récapitulatif
Utilisez bind:value pour lier un champ dans les deux sens, avec conversion automatique des types pour les champs numériques et de plage.
Questions Fréquemment Posées
La leçon « bind:value pour les saisies de texte » est-elle gratuite ?
Oui — le texte complet de « bind:value pour les saisies de texte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « bind:value pour les saisies de texte » ?
Synchronisez automatiquement les valeurs saisies avec les variables du composant. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « bind:value pour les saisies de texte » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- bind:value pour les saisies de texte
- bind:checked pour les cases à cocher
- bind:group pour les groupes de boutons radio et de cases à cocher
- bind:this pour les références aux éléments du DOM