javascript / beginner
Snippet
Two-Way Binding with bind:value
By default, data flow in Svelte is top-down. Using the bind: directive allows for two-way data binding, meaning changes in the UI (like an input field) immediately update the underlying variable and vice-versa.
snippet.js
1
2
3
4
5
6
7
<script>let name = 'Svelte';</script><input bind:value={name}><h1>Hello {name}!</h1>
svelte
Breakdown
1
bind:value={name}
Links the input's value to the 'name' variable in both directions.