Condicionales y operadores lógicos en Svelte

Alex Tomás
2 min readFeb 14, 2021

--

{#if …}

El HTML como tal no tiene una forma de expresar lógica, como podría ser los condicionales y bucles. Svelte lo hace.

Para renderizar condicionalmente algún marcado, lo envolvemos en un bloque if:

<script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{/if}
{#if !user.loggedIn}
<button on:click={toggle}>
Log in
</button>
{/if}

Esto funciona, pero no es lo más limpio de ver. Para eso tenemos el else que veremos a continuación.

{:else …}

Dado que las dos condiciones (si user.loggedIn y si !user.loggedIn), ambas son excluyentes, podemos simplificar un poco este componente usando un bloque else:

<script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{:else}
<button on:click={toggle}>
Log in
</button>
{/if}

Un carácter # (#if por ejemplo) indica siempre una etiqueta de apertura de bloque. Un carácter / (/if por ejemplo) indica siempre una etiqueta de cierre de bloque. Los dos puntos (:) {:else}, indica una etiqueta de continuación de bloque.

{:else if …}

Y como en otros muchos lenguajes de programación, se puede concatenar varios bloques {:else if}, por ejemplo:

<script>
let x = 7;
</script>
{#if x > 10}
<p>{x} es mayor que 10</p>
{:else if 5 > x}
<p>{x} es menor que 5</p>
{:else}
<p>{x} está entre 5 y 10</p>
{/if}

El resultado sería en este caso:

7 está entre 5 y 10

{:each}

Para hacer bucles en Svelte tenemos {:each}. Muy sencillo:

<script>
let perros = [
{ id: 123, name: 'Max' },
{ id: 456, name: 'Leo' },
{ id: 789, name: 'Nina' }
];
</script>
<ul>
{#each perros as perro}
<li>
{perro.name}
</li>
{/each}
</ul>

Lo que nos imprimiría una lista de mis perros 🐶:

<ul>
<li>Max</li>
<li>Leo</li>
<li>Nina</li>
</ul>

Si necesitas el index del bucle, puedes obtenerlo de la siguiente forma:

<script>
let perros = [
{ id: 123, name: 'Max' },
{ id: 456, name: 'Leo' },
{ id: 789, name: 'Nina' }
];
</script>
<ul>
{#each perros as perro, indice}
<li>
{indice + 1}: {perro.name}
</li>
{/each}
</ul>

Lo que nos imprimiría una lista numerada de mis perros 🐶:

<ul>
<li>1. Max</li>
<li>2. Leo</li>
<li>3. Nina</li>
</ul>

{#await}

La mayoría de las aplicaciones web tienen que lidiar con datos asincrónicos en algún momento. Svelte hace que sea fácil esperar el valor de directamente en su marcado:

{#await promise}
<p>...esperando</p>
{:then number}
<p>El número es {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}

Y esto es todo. Espero que te pueda servir 😉

--

--

No responses yet