bind:value for tekstinndata
Hold tekstverdier fra inndata automatisk synkronisert med komponentvariabler.
bind:value for tekstinndata er en gratis leksjon i Sveltejs Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Sveltejs Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.
Hva bind:value gjør
bind:value-direktivet oppretter en toveis kobling mellom en variabel og et inndatafelt i et skjema.
Grunnleggende eksempel
Knytt en let-variabel til et tekstfelt. Når du skriver, oppdateres variabelen, og programmatisk endringer oppdaterer feltet.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Kortform
Hvis variabelen og attributtet har samme navn, kan du utelate høyresiden.
<input bind:value />Tallfelt
For type="number" gjør Svelte automatisk om verdien til et tall.
<input type="number" bind:value={age} />Områdeinndata
Glidebrytere fungerer på samme måte og konverterer også verdien til et tall.
<input type="range" bind:value={volume} />Tekstområder
Knytt value til tekstområder på samme måte som til inndatafelt.
<textarea bind:value={comment}></textarea>Enkeltvalg
For én enkelt <select> knytter du value til verdien for det valgte alternativet.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Programmatisk oppdatering
Når du tilordner en verdi til den bundne variabelen, oppdateres inndatafeltet umiddelbart. Dette er nyttig for knapper som tømmer skjemaet.
function clear() { name = ""; }Ingen ny rendering nødvendig
Reaktiviteten er automatisk. Du trenger aldri å kalle setState eller opprette bindingen på nytt manuelt.
Validering
Legg til reaktive uttrykk for å validere mens brukeren skriver.
$: isValid = email.includes("@");Debouncing
For kostbar validering kan du bruke debouncing i et reaktivt uttrykk eller et verktøy som lodash.debounce.
Rask kontroll
Hva gjør bind:value?
Oppsummering
Bruk bind:value for toveis binding av inndata, med automatisk typekonvertering for tallfelt og områdeinndata.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «bind:value for tekstinndata» gratis?
Ja – hele teksten i «bind:value for tekstinndata» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Sveltejs Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «bind:value for tekstinndata»?
Hold tekstverdier fra inndata automatisk synkronisert med komponentvariabler. Du øver på Sveltejs Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Sveltejs Academy?
Ingen tidligere erfaring er nødvendig. Sveltejs Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «bind:value for tekstinndata»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Sveltejs Academy-leksjonen?
Ja. Alle Sveltejs Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- bind:value for tekstinndata
- bind:checked for avkrysningsbokser
- bind:group for grupper av radio- og avkrysningsbokser
- bind:this for referanser til DOM-elementer