bind:value voor tekstinvoer
Houd waarden van tekstinvoer automatisch synchroon met variabelen in de component.
bind:value voor tekstinvoer is een gratis Sveltejs Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Sveltejs Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Sveltejs Academy bevat in totaal 4 lessen.
Wat bind:value doet
De richtlijn bind:value maakt een tweerichtingsverbinding tussen een variabele en een formulierinvoerveld.
Basisvoorbeeld
Koppel een let-variabele aan een tekstinvoerveld. Typen werkt de variabele bij; programmatische wijzigingen werken het veld bij.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Verkorte notatie
Als de variabele en het kenmerk dezelfde naam hebben, kun je de rechterkant weglaten.
<input bind:value />Numerieke invoervelden
Voor type="number" zet Svelte de waarde automatisch om naar een getal.
<input type="number" bind:value={age} />Bereikinvoervelden
Schuifregelaars werken op dezelfde manier en zetten de waarde ook om naar een getal.
<input type="range" bind:value={volume} />Tekstgebieden
Koppel value aan tekstgebieden, net als aan invoervelden.
<textarea bind:value={comment}></textarea>Enkele selectie
Koppel bij één <select> de waarde aan de waarde van de geselecteerde optie.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Programmatisch bijwerken
Als je de gekoppelde variabele een waarde toewijst, wordt het invoerveld onmiddellijk bijgewerkt. Handig voor knoppen die een formulier leegmaken.
function clear() { name = ""; }Geen nieuwe weergave nodig
Reactiviteit gebeurt automatisch. Je roept nooit setState aan en koppelt nooit handmatig opnieuw.
Validatie
Voeg reactieve statements toe om te valideren terwijl de gebruiker typt.
$: isValid = email.includes("@");Debouncing
Debounce bij dure validatie binnen een reactief statement of gebruik een hulpprogramma zoals lodash.debounce.
Korte controle
Wat doet bind:value?
Samenvatting
Gebruik bind:value voor tweerichtingsbinding van invoer, met automatische typeconversie voor numerieke invoervelden en bereikinvoervelden.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “bind:value voor tekstinvoer” gratis?
Ja — de volledige tekst van “bind:value voor tekstinvoer” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Sveltejs Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Sveltejs Academy bevat in totaal 4 lessen.
Wat leer ik in “bind:value voor tekstinvoer”?
Houd waarden van tekstinvoer automatisch synchroon met variabelen in de component. Je oefent met Sveltejs Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Sveltejs Academy te beginnen?
Ervaring vooraf is niet nodig. Sveltejs Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “bind:value voor tekstinvoer”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Sveltejs Academy?
Ja. Elke les over Sveltejs Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- bind:value voor tekstinvoer
- bind:checked voor selectievakjes
- bind:group voor groepen radio buttons en selectievakjes
- bind:this voor verwijzingen naar DOM-elementen