bind:value für Texteingaben
Halten Sie die Werte von Texteingaben automatisch mit den Variablen der Komponente synchron.
bind:value für Texteingaben ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was bind:value bewirkt
Die bind:value-Direktive stellt eine bidirektionale Verbindung zwischen einer Variablen und einem Formulareingabefeld her.
Grundlegendes Beispiel
Binden Sie eine let-Variable an ein Texteingabefeld. Beim Tippen wird die Variable aktualisiert, und programmatische Änderungen aktualisieren das Feld.
<script>
let name = "";
</script>
<input bind:value={name} />
<p>Hello {name}</p>Kurzschreibweise
Wenn Variable und Attribut denselben Namen haben, lassen Sie die rechte Seite weg.
<input bind:value />Zahleneingaben
Bei type="number" wandelt Svelte den Wert automatisch in eine Zahl um.
<input type="number" bind:value={age} />Bereichseingaben
Schieberegler funktionieren auf dieselbe Weise und wandeln den Wert ebenfalls in eine Zahl um.
<input type="range" bind:value={volume} />Textbereiche
Binden Sie value bei Textbereichen genauso wie bei Eingabefeldern.
<textarea bind:value={comment}></textarea>Einzelauswahl
Binden Sie bei einem einzelnen <select> den Wert an den Wert der ausgewählten Option.
<select bind:value={color}>
<option>red</option>
<option>blue</option>
</select>Programmatische Aktualisierung
Eine Zuweisung an die gebundene Variable aktualisiert das Eingabefeld sofort. Das ist nützlich für Schaltflächen zum Leeren des Formulars.
function clear() { name = ""; }Keine erneuten Renderings erforderlich
Die Reaktivität erfolgt automatisch. Sie müssen weder setState aufrufen noch die Bindung manuell erneut herstellen.
Validierung
Fügen Sie reaktive Anweisungen hinzu, um während der Eingabe zu validieren.
$: isValid = email.includes("@");Entprellen
Entprellen Sie bei aufwendiger Validierung innerhalb einer reaktiven Anweisung oder verwenden Sie ein Hilfsprogramm wie lodash.debounce.
Schnelltest
Was bewirkt bind:value?
Zusammenfassung
Verwenden Sie bind:value für die bidirektionale Bindung von Eingaben mit automatischer Typumwandlung bei Zahlen- und Bereichseingaben.
Häufig gestellte Fragen
Ist die Lektion „bind:value für Texteingaben“ kostenlos?
Ja — der vollständige Text von „bind:value für Texteingaben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „bind:value für Texteingaben“?
Halten Sie die Werte von Texteingaben automatisch mit den Variablen der Komponente synchron. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „bind:value für Texteingaben“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- bind:value für Texteingaben
- bind:checked für Kontrollkästchen
- bind:group für Radio- und Kontrollkästchengruppen
- bind:this für DOM-Elementreferenzen