Jak funguje logika if-else ve Svelte

Stejně jako jiné moderní rámce, jako jsou Vue a React, umožňuje Svelte logiku v rámci samotných komponent. V tomto článku se podíváme na to, jak funguje logika příkazů if a else ve Svelte mimo Javascript. Pokud jste ve Svelte úplně noví, začněte mým průvodcem vytvořením vaší první aplikace Svelte.

Použití příkazů if-else ve Svelte

Vytvoříme novou komponentu. Vytvořte nový soubor ve svém projektu Svelte v ./src/components s názvem Component.svelte.Do této komponenty přidejte následující kód:

<script>
    // we write export let to say that this is a property
    // that means we can change it later!
    export let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{x}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

Tato jednoduchá součást vytvoří počítadlo, které ke své hodnotě přidá 1 pokaždé, když na něj kliknete. Podívejme se, jak bychom v tomto příkladu použili inline logiku.

If Statement Logic in Svelte

Logika ve Svelte jde do {} složených závorek. Předpokládejme, že chceme zobrazit zprávu na základě hodnoty x z naší výše uvedené komponenty. Naše logika by měla být:

• pokud je hodnota větší než 5 a menší než 10, zobrazte „více než 5 kliknutí!“
• pokud je hodnota vyšší než 10, zobrazte „wow, to je hodně kliknutí!“
• jinak ukažte „klikejte dál!“

Ve Svelte to vypadá takto:

<script>
    export let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

{#if x <= 10 && x > 5}
    <h2>more than 5 clicks!</h2>
{:else if x > 10}
    <h2>wow that's a lot of clicks!</h2>
{:else} 
    <h2>keep clicking!</h2>
{/if}

<button id="counter" on:click="{addToCounter}">{x}</button>

To znamená, že se nemusíme spoléhat na funkce Javascriptu, abychom napsali, který titul chceme zobrazit – místo toho jej můžeme zapsat přímo do našich komponent Svelte.

příkazy if-else ve Svelte

Podobně jako dříve, pokud jste chtěli mít pouze if a other, můžete to udělat také:

{#if x <= 10 && x > 5}
    <h2>more than 5 clicks!</h2>
{:else} 
    <h2>keep clicking!</h2>
{/if}

A konečně, samotný příkaz if funguje také - ideální pro skrytí nebo zobrazení prvků DOM založených na hodnotách Javascript:

{#if x <= 10 && x > 5}
    <h2>more than 5 clicks!</h2>
{/if}

Struktura příkazů if-else ve Svelte

• První část příkazu if vždy začíná {#if STATEMENT} kde STATEMENT je jakýkoli logický příkaz Javascript, který chceme otestovat.
• Pokud budeme pokračovat s else if nebo else, zapíše se to jako {:else if STATEMENT} a {:else} - pomocí :místo # .
• Všechny logické příkazy dokončíme pomocí {/if} .