Conditional Rendering Svelte — Svelte

Svelte menggunakan block syntax {#if} untuk conditional rendering. {#if} let loggedIn = false {#if loggedIn} loggedIn = false}>Log out {:else} loggedIn = true}>

Svelte menggunakan block syntax {#if} untuk conditional rendering.

{#if}

<script>
  let loggedIn = false
</script>

{#if loggedIn}
  <button on:click={() => loggedIn = false}>Log out</button>
{:else}
  <button on:click={() => loggedIn = true}>Log in</button>
{/if}

{:else if}

<script>
  let nilai = 85
</script>

{#if nilai >= 90}
  <p>A</p>
{:else if nilai >= 80}
  <p>B</p>
{:else if nilai >= 70}
  <p>C</p>
{:else}
  <p>D</p>
{/if}

Block harus selalu ditutup dengan {/if}.

Yang akan kamu pelajari