javascript / beginner
Snippet
Formulareingaben über das Two-Way-Binding-Muster in Svelte synchronisieren
Das Two-Way-Binding-Muster in Svelte nutzt die `bind:`-Direktive, um Variablenwerte automatisch mit Änderungen von Benutzereingaben zu synchronisieren, ohne manuelle Event-Listener zu erfordern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>let username = '';let acceptedTerms = false;</script><form on:submit|preventDefault><label>Username:<input type="text" bind:value={username} /></label><label><input type="checkbox" bind:checked={acceptedTerms} />Accept terms and conditions</label><p>Preview: {username || 'Anonymous'} ({acceptedTerms ? 'Agreed' : 'Pending'})</p></form>
svelte
Erklärung
1
let username = '';
Definiert die Zustandsvariable, die den eingegebenen Text speichert.
2
<input type="text" bind:value={username} />
Bindet den Wert des Textfelds bidirektional an die Variable username.
3
<input type="checkbox" bind:checked={acceptedTerms} />
Bindet den Status der Checkbox bidirektional an die boolesche Variable acceptedTerms.
4
{acceptedTerms ? 'Agreed' : 'Pending'}
Wertet den gebundenen booleschen Wert direkt über einen ternären Operator aus.