Latihan 2: Binding Data Svelte — Svelte

Latihan 2 dari materi Binding Data Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya let setuju = false dan <label> bertuliskan Saya setuju. Biarkan keduanya.

Di dalam <label>, sebelum tulisan Saya setuju, tambahkan <input type="checkbox" bind:checked={setuju} />.
Di bawah <label>, tambahkan blok {#if setuju} berisi Anda setuju, cabang {:else} berisi Belum setuju, lalu tutup dengan {/if}.

Penguji mengklik kotak centang pertama dan membaca  pertama.

Yang dicek:

Sebelum diklik,  berisi persis Belum setuju.
Kodemu memakai bind:checked.
Setelah kotaknya diklik sekali,  berisi Anda setuju.
Dari awal lagi, setelah kotaknya diklik dua kali,  kembali berisi Belum setuju.

Hint

Kotak centang menyimpan keadaannya di checked, true atau false. Ikat itu dua arah ke setuju, lalu pilih paragrafnya dengan blok if.
Tambahkan input checkbox dengan bind:checked={setuju} di dalam label, lalu {#if setuju} untuk paragraf Anda setuju dan {:else} untuk Belum setuju.
<input type="checkbox" bind:checked={setuju} /> di dalam label, lalu {#if setuju} Anda setuju {:else} Belum setuju {/if}

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Binding Data Svelte — Svelte

Hint

Memperbarui Aplikasi