You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/documentation/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte

40 lines
748 B

<script>
let todos = [
{ done: false, text: 'finish Svelte tutorial' },
{ done: false, text: 'build an app' },
{ done: false, text: 'world domination' }
];
function add() {
todos = todos.concat({ done: false, text: '' });
}
function clear() {
todos = todos.filter((t) => !t.done);
}
$: remaining = todos.filter((t) => !t.done).length;
</script>
<h1>Todos</h1>
{#each todos as todo}
<div class:done={todo.done}>
<input type="checkbox" bind:checked={todo.done} />
<input placeholder="What needs to be done?" bind:value={todo.text} />
</div>
{/each}
<p>{remaining} remaining</p>
<button on:click={add}> Add new </button>
<button on:click={clear}> Clear completed </button>
<style>
.done {
opacity: 0.4;
}
</style>