{#if} {#else if} {#else}
Renderice el marcado condicionalmente según expresiones de JavaScript
{#if} {#else if} {#else} es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Bloques condicionales
Las condiciones de Svelte se parecen a las de Handlebars: {#if}, {:else if}, {:else}, cerradas con {/if}.
Ejemplo básico
Muestre una rama u otra según una expresión booleana.
{#if loggedIn}
<p>Welcome back!</p>
{:else}
<p>Please sign in.</p>
{/if}Varias ramas
Encadene condiciones con {:else if}.
{#if score > 90}
<p>A</p>
{:else if score > 75}
<p>B</p>
{:else}
<p>C</p>
{/if}Las expresiones son JavaScript
La condición puede ser cualquier expresión válida de JavaScript.
{#if items.length > 0 && !isLoading}Etiqueta de cierre
Cierre siempre con {/if}. Omitir el cierre provoca errores de compilación.
if anidado
Las condiciones pueden anidarse libremente dentro de otros bloques de Svelte y de HTML.
{#if user}
{#if user.admin}
<Admin />
{/if}
{/if}No hay switch
Svelte no tiene un bloque switch integrado. Use {:else if} encadenados o calcule una variable.
Combinar con each
Puede envolver una lista en una condición para renderizarla solo cuando haya elementos.
{#if items.length}
{#each items as item}<li>{item}</li>{/each}
{/if}Reactividad interna
La condición es reactiva: cada vez que cambian sus dependencias, Svelte la vuelve a evaluar y cambia de rama.
Animaciones en if
Puede añadir directivas transition: a los elementos dentro de bloques if para animar su entrada y salida.
Ramas vacías
Puede tener un bloque if sin else. La rama else es opcional.
Comprobación rápida
¿Cómo se cierra un bloque if de Svelte?
Repaso
Use {#if}/{:else if}/{:else}/{/if} para el renderizado condicional. La expresión es JS normal.
Preguntas frecuentes
¿La lección «{#if} {#else if} {#else}» es gratis?
Sí — el texto completo de «{#if} {#else if} {#else}» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «{#if} {#else if} {#else}»?
Renderice el marcado condicionalmente según expresiones de JavaScript Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «{#if} {#else if} {#else}»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- {#if} {#else if} {#else}
- {#each} con índice y clave
- {#key} para forzar el renderizado
- {#each} anidados y actualizaciones con clave