Plantillas esbeltas: lógica condicional

Aprenda a trabajar con plantillas en Svelte y, en particular, a utilizar condicionales.

Cualquier buen lenguaje de plantillas para la Web le proporciona al menos dos cosas: una estructura condicional y un bucle.

Svelte no es una excepción, y en esta publicación analizaré las estructuras condicionales.

Desea poder ver un valor / expresión, y si eso apunta a un valor verdadero, haga algo, si eso apunta a un valor falso, haga otra cosa.

Svelte nos proporciona un conjunto muy poderoso de estructuras de control.

El primero essi:

{#if isRed}
	<p>Red</p>
{/if}

Hay una apertura{#if}y un final{/if}. El marcado de apertura verifica que un valor o declaración sea veraz. En este casoisRedpuede ser un booleano con untruevalor:

<script>
let isRed = true
</script>

Una cadena vacía es falsa, pero una cadena con algún contenido es verdadera.

0 es falso, pero un número> 0 es verdadero.

El valor booleanotruees veraz, por supuesto, yfalsees falso.

Si el margen de ganancia de apertura no se satisface (se proporciona un valor falso), entonces no sucede nada.

Para hacer otra cosa si no está satisfecho, usamos el apropiadamente llamadoelsedeclaración:

{#if isRed}
	<p>Red</p>
{:else}
	<p>Not red</p>
{/if}

El primer bloque se representa en la plantilla o el segundo. No hay otra opción.

Puede utilizar cualquier expresión de JavaScript en elifcondición de bloqueo, por lo que puede negar una opción utilizando el!operador:

{#if !isRed}
	<p>Not red</p>
{:else}
	<p>Red</p>
{/if}

Ahora, dentro delelsees posible que desee comprobar si hay una condición adicional. Ahí es donde el{:else if somethingElse}viene la sintaxis:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else}
  <p>Not red nor green</p>
{/if}

Puede tener muchos de estos bloques, no solo uno, y puede anidarlos. Aquí hay un ejemplo más complejo:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else if isBlue}
  <p>It is blue</p>
{:else}
  {#if isDog}
    <p>It is a dog</p>
  {/if}
{/if}

Descarga mi gratisManual Svelte

Plantillas esbeltas: lógica condicional

Aprenda a trabajar con plantillas en Svelte y, en particular, a utilizar condicionales.

Tutoriales más esbeltos: