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ě.
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>
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>