Condicionales y operadores lógicos en Svelte

{#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 🙃

#svelte #curso svelte