Aula 06 - Loops e Condicionais 🔁

Objetivo

Objetivo: Aprender a controlar o que aparece na tela usando lógica condicional e como exibir listas de dados de forma dinâmica e eficiente.

1. Renderização Condicional `{#if}` ❓

No Svelte, não usamos if dentro de tags de script para esconder elementos. Usamos blocos lógicos diretamente no HTML. Eles sempre começam com # e terminam com /.

<script>
  let logado = false;
</script>

{#if logado}
  <h1>Bem-vindo de volta!</h1>
  <button on:click={() => logado = false}>Sair</button>
{:else}
  <h1>Por favor, faça login.</h1>
  <button on:click={() => logado = true}>Entrar</button>
{/if}

2. Lógica de Decisão (Mermaid) 📊

graph TD
    A[Início do Bloco #if] --> B{Condição é verdadeira?}
    B -- Sim --> C[Renderiza conteúdo do IF]
    B -- Não --> D[Renderiza conteúdo do ELSE]
    C --> E[Fim do Bloco /if]
    D --> E

3. Iterando Listas com `{#each}` 📄

Para exibir uma lista de itens (como produtos ou tarefas), usamos o bloco {#each}.

<script>
  let frutas = ["Maçã", "Banana", "Morango", "Uva"];
</script>

<ul>
  {#each frutas as fruta}
    <li>{fruta}</li>
  {/each}
</ul>

Nota

Você também pode pegar o índice do item na lista: {#each frutas as fruta, i}. O i será 0, 1, 2...

4. O Fluxo de uma Lista Dinâmica 💻

<div id="termynal" data-termynal>
    <span data-ty="input">let tarefas = ['Estudar', 'Cozinhar']</span>
    <span data-ty="input">tarefas = [...tarefas, 'Dormir']</span>
    <span data-ty="progress"></span>
    <span data-ty># Svelte atualiza o DOM instantaneamente!</span>
</div>

5. Chaves nos Loops (Keyed each) 🔑

Sempre que a sua lista mudar (itens removidos ou reordenados), o Svelte precisa de uma forma de identificar cada item de forma única para manter a performance. Usamos um parêntese para passar a chave.

{#each produtos as produto (produto.id)}
  <Card {produto} />
{/each}

Dica de Performance

Sempre use uma chave única (como um ID do banco de dados) em vez do índice i se a sua lista puder ser alterada.

6. Mini-Projeto: Lista de Compras Inteligente 🚀

Sua missão: 1. Crie uma variável itensCompra que seja um array de objetos (ex: {id: 1, nome: 'Café', comprado: false}). 2. Use um {#each} para listar esses itens. 3. Use um {#if} dentro do loop para mostrar um emoji de "✅" se o item estiver comprado ou "❌" se não estiver. 4. Adicione um botão "Alternar" que mude o estado de comprado do item.

7. Exercício de Fixação 📝

Como se fecha um bloco {#if} no Svelte?
Qual a sintaxe para percorrer uma lista de usuarios e mostrar o nome de cada um?
Para que serve a "chave" em um bloco {#each}?

Próxima Aula: Vamos aprender a interagir com o usuário através de Eventos e Formulários! ⌨️