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:

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:

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:

El resultado sería en este caso:

{:each}

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

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

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

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

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

Y esto es todo. Espero que te pueda servir 😉

--

--

alextomas.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store