Plantillas Svelte: lógica condicional

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

Cualquier buen lenguaje de plantillas para la Web 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.

Quiere poder mirar un valor/expresión y, si apunta a un valor verdadero, hacer algo; si apunta a un valor falso, hacer otra cosa.

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

El primero es si :

{#if isRed}pRed/p{/if}

Hay una apertura {#if}y una finalización {/if}. El marcado de apertura verifica que un valor o una declaración sean verdaderos. En este caso, isRedpuede ser un booleano con un truevalor:

scriptlet 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 booleano truees verdadero, por supuesto, y falsees falso.

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

Para hacer otra cosa si esto no se satisface, utilizamos la elsedeclaración apropiadamente llamada:

{#if isRed}pRed/p{:else}pNot red/p{/if}

O bien se renderiza el primer bloque en la plantilla, o bien se renderiza el segundo. No hay otra opción.Te recomendamos Olla express a presion

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

{#if !isRed}pNot red/p{:else}pRed/p{/if}

Ahora, dentro de la función, elsees posible que quieras comprobar si hay una condición adicional. Ahí es donde {:else if somethingElse}entra en juego la sintaxis:

{#if isRed} pRed/p{:else if isGreen} pGreen/p{:else} pNot red nor green/p{/if}

Puedes tener muchos de estos bloques, no solo uno, y puedes anidarlos. Aquí tienes un ejemplo más complejo:

{#if isRed} pRed/p{:else if isGreen} pGreen/p{:else if isBlue} pIt is blue/p{:else} {#if isDog} pIt is a dog/p {/if}{/if}

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Plantillas Svelte: lógica condicional

Cualquier buen lenguaje de plantillas para la Web proporciona al menos dos cosas: una estructura condicional y un bucle. Aprenda a trabajar con plantillas en S

programar

es

2025-01-23

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente