If blocks

HTML doesn’t have a way of expressing logic, like conditionals and loops. Svelte does.

To conditionally render some markup, we wrap it in an if block:

  1. {#if user.loggedIn}
  2.     <button on:click={toggle}>
  3.         Log out
  4.     </button>
  5. {/if}
  7. {#if !user.loggedIn}
  8.     <button on:click={toggle}>
  9.         Log in
  10.     </button>
  11. {/if}

Try it — update the component, and click on the buttons.