Vue.js je snadno naučitelná a přístupná knihovna, v níž můžeme začít vytvářet webové aplikace se základními znalostmi vývoje webových aplikací. Vue.js, vývojáři rádi kódují a cítí svobodu při vývoji aplikací.

V jakékoli dynamické webové aplikaci je podmíněné vykreslování nezbytnou součástí. Vue.js poskytuje různé způsoby podmíněného vykreslování a můžeme použít kterýkoli z následujících způsobů, které vyhovují našemu účelu:

• v-show
• v-li
• v-else

V tomto článku vyzkoušíme tyto směrnice poskytované společností Vue.js pro podmíněné vykreslování a lépe jim porozumět.

v-show

V-show skryje prvek pouze deaktivací jeho viditelnosti. Skryje prvek, pokud hodnota předaného výrazu nebo proměnné není truthy.

Například:

Tento odstavec není skrytý

Tento odstavec je skrytý

v-li

Na druhou stranu v-if prvek neskrývá, ale také nic nevykreslí, dokud se hodnota předaného výrazu nebo proměnné nestane pravdivou.

Například:

Ve směrnici v-if existuje další funkce ve srovnání se směrnicí v-show. Můžeme jej použít také na blok šablony, pokud nechceme mezi tímto blokem nic vykreslit. Buď je v tom podřízená komponenta, nebo spousta dalších prvků.

Například:

v-else

Můžeme také použít směrnici v-else spolu s příkazem v-if, abychom podmíněně vykreslili mezi některým ze dvou bloků. Mějte však na paměti, že blok v-else se musí objevit hned po bloku v-if.

Například:

Tento odstavec se vykreslí, pokud se hodnota „isVar“ stane pravdivou

Jinak bude tento odstavec vykreslen.

Můžeme také použít v-else na blok šablony.

v-else-if

Stejně jako v-else můžeme také použít směrnici v-else-if spolu se směrnicí v-if.

Například:

v-if vs. v-show

Druhy v-if a v-show dělají stejný úkol. Oba skryjí prvky v DOM na základě truthy nebo falsy hodnoty předaného výrazu, ale s jemným rozdílem skrytí a nevykreslení prvků.

Pokud porovnáme čas a náklady na zpracování mezi těmito dvěma. V-if stojí více za běhu nebo přepínání, zatímco v-show stojí více na začátku vykreslování. Bylo by moudré použít v-show, když je přepínání účel. Jinak se dává přednost v-if.

Balení

V tomto článku jsme se naučili, jak podmíněně vykreslit DOM ve Vue.js používající směrnice v-if a v-else. Ukázali jsme několik příkladů a dozvěděli jsme se o skutečném rozdílu mezi směrnicí v-show a v-if. Pokud vám tento článek pomůže lépe porozumět a pochopit pojmy, pokračujte v návštěvě linuxhint.com pro takový užitečný obsah.