Saltar al contenido principal

Condicionales

  • {#if ...} abre o inicia un bloque
  • {:else ...} continua un bloque
  • {/if} cierra un bloque

if​

Para renderizar condicionalmente contenido HTML, se envuelve en un bloque if

App.svelte
// Estado y logica
<script>
  let count = $state(0);
  
  function increment(){
    count += 1;
  }
</script>

// Acción
<button onclick={increment}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

// Contenido condicional
{#if count > 10}
  <p>{count} is greater than 10</p>
{/if}

else​

Un bloque if también puede tener un bloque else

App.svelte
{#if count > 10}
  <p>{count} is greater than 10</p>
{:else}
  </p>{count} is between 0 and 10</p>
{/if}

else if​

  • Encadenar multiples condicionales con else if
App.svelte
{#if count > 10}
  <p>{count} is greater than 10</p>
{:else if count < 5}
  <p>{count} is less than 5</p>
{:else}
  <p>{count} is between 5 and 10</p>
{/if}