0Pricing
Sveltejs Academy · Pelajaran

{#if} {#else if} {#else}

Render markup secara kondisional berdasarkan ekspresi JavaScript.

{#if} {#else if} {#else} adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.

Blok Kondisional

Kondisional Svelte mirip dengan Handlebars: {#if}, {:else if}, {:else}, dan ditutup dengan {/if}.

Contoh Dasar

Tampilkan satu cabang atau cabang lainnya berdasarkan ekspresi boolean.

{#if loggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please sign in.</p>
{/if}

Beberapa Cabang

Rangkai dengan {:else if} untuk beberapa kondisi.

{#if score > 90}
  <p>A</p>
{:else if score > 75}
  <p>B</p>
{:else}
  <p>C</p>
{/if}

Ekspresi adalah JavaScript

Kondisinya dapat berupa ekspresi JavaScript valid apa pun.

{#if items.length > 0 && !isLoading}

Tag Penutup

Selalu tutup dengan {/if}. Penutup yang hilang menyebabkan galat kompilasi.

if Bersarang

Kondisional dapat disarangkan dengan bebas di dalam blok Svelte lain dan HTML.

{#if user}
  {#if user.admin}
    <Admin />
  {/if}
{/if}

Tanpa switch

Svelte tidak memiliki blok switch bawaan. Gunakan rangkaian {:else if} atau hitung sebuah variabel.

Menggabungkan dengan each

Anda dapat membungkus daftar dalam kondisional agar hanya dirender ketika ada item.

{#if items.length}
  {#each items as item}<li>{item}</li>{/each}
{/if}

Reaktivitas di Dalam

Kondisinya reaktif: setiap kali dependensinya berubah, Svelte mengevaluasi ulang kondisi tersebut dan menukar cabang.

Animasi pada if

Anda dapat memasang direktif transition: pada elemen di dalam blok if untuk menganimasikan kemunculan dan keluarnya elemen.

Cabang Kosong

Anda dapat memiliki blok if tanpa else. else bersifat opsional.

Pemeriksaan Singkat

Bagaimana cara menutup blok if Svelte?

Ringkasan

Gunakan {#if}/{:else if}/{:else}/{/if} untuk perenderan kondisional. Ekspresinya adalah JS biasa.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “{#if} {#else if} {#else}” gratis?

Ya — teks lengkap “{#if} {#else if} {#else}” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “{#if} {#else if} {#else}”?

Render markup secara kondisional berdasarkan ekspresi JavaScript. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?

Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “{#if} {#else if} {#else}” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?

Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. {#if} {#else if} {#else}
  2. {#each} dengan Indeks dan Kunci
  3. {#key} untuk Memaksa Render Ulang
  4. {#each} Bersarang dan Pembaruan Berkunci
← Kembali ke Sveltejs Academy