Podmínky ve Vue.js

Výrazy v podmínkách se zapisují jako v čistém javascriptu tak, jak jste zvyklí. Velkou výhodou však je, že Vue přináší jednoduchý způsob, jak do podmínky vložit jen část šablony a tu podmíněně vypsat nebo ignorovat.

Použití je například pro podmíněné zobrazení části šablony:

<div id="app">
    <span v-if="seen">Nyní vidíte obsah!</span>
</div>

V javascriptu velmi jednoduše:

const app = new Vue({
    el: '#app',
    data: {
        seen: true
    }
})

<span> se při vykreslení stránky zobrazí, protože je podmínka splněna a hodnota proměnné seen je true.

Zkuste nyní otevřít Konzoli v prohlížeči nad vaší stránkou a zadat příkaz app.seen = false. Vue detekuje změnu dat, proto bude muset překresli šablonu. Důsledek bude ten, že se <span> do stránky vůbec nevloží a nebude se proto zobrazovat.

Skrytí elementů je řešeno na úrovni DOM v prohlížeči. Pokud podmínka neplatí, tak se element do stránky vůbec nevkládá a proto vůbec neexistuje. Nelze ho tedy ovlivnit například CSS stylem a podobně.

If - else

Při běžném zápisu podmíny v javascriptu máme k dispozici blok if a také else. Jak ale řešit zápis else, když se podmínka použije inline v rámci HTML elementu a neexistuje tedy kontext rozpoznatelný přes složené závorky?

Vue pro tento případ implementuje konstrukci v-else. Ta funguje jen v případě, když předchozí HTML element na stejné úrovni obsahoval v-if s nepravdivým výrazem.

Například:

<div id="app">
    <span v-if="seen">Nyní vidíte obsah!</span>
    <span v-else>A teď nevidíte nic.</span>
</div>

Ověření prázdnosti pole

Velmi často potřebujeme poznat, jestli je uložené pole prázdné, případně má proměnná hodnotu null.

To lze řešit různými způsoby, nicméně nejlepší způsob je zjistit počet položek a ověřit, jestli je počet větší než nula.

Například:

<div id="app">
    <template v-if="items.length > 0">
        <ul>
            <li v-for="item in items">{{ item }}</li>
        </ul>
    </template>
    <template v-else>
        Žádné položky.
    </template>
</div>