Basic Svelte
Introduction
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
You can bind to properties inside an each
block.
App
{#each todos as todo}
<li class={{ done: todo.done }}>
<input
type="checkbox"
bind:checked={todo.done}
/>
<input
type="text"
placeholder="What needs to be done?"
bind:value={todo.text}
/>
</li>
{/each}
previous next
<script>
let todos = $state([
{ done: false, text: 'finish Svelte tutorial' },
{ done: false, text: 'build an app' },
{ done: false, text: 'world domination' }
]);
function add() {
todos.push({
done: false,
text: ''
});
}
function clear() {
todos = todos.filter((t) => !t.done);
}
let remaining = $derived(todos.filter((t) => !t.done).length);
</script>
<div class="centered">
<h1>todos</h1>
<ul class="todos">
{#each todos as todo}
<li class={{ done: todo.done }}>
<input
type="checkbox"
checked={todo.done}
/>
<input
type="text"
placeholder="What needs to be done?"
value={todo.text}