Vue.js je ľahko naučiteľná a prístupná knižnica, v ktorej môžeme začať vytvárať webové aplikácie so základnými znalosťami vývoja webových aplikácií. Vo Vue.js, vývojári radi kódujú a pri vývoji aplikácií cítia slobodu.

V každej dynamickej webovej aplikácii je podmienené vykreslenie nevyhnutnou súčasťou. Vue.js poskytuje rôzne spôsoby podmieneného vykresľovania a môžeme použiť ktorýkoľvek z nasledujúcich spôsobov, ktoré vyhovujú nášmu účelu:

• v-show
• v-keby
• v-else

V tomto článku vyskúšame tieto smernice poskytnuté spoločnosťou Vue.js pre podmienené vykreslenie a lepšie im porozumieť.

v-show

V-show skryje prvok iba vypnutím jeho viditeľnosti. Skryje prvok, ak hodnota odovzdaného výrazu alebo premennej nie je truthy.

Napríklad:

Tento odsek nie je skrytý

Tento odsek je skrytý

v-keby

Na druhej strane v-if prvok neskryje, ale tiež nič nevytvorí, kým sa hodnota odovzdaného výrazu alebo premennej nestane pravdivou.

Napríklad:

V smernici v-if existuje ďalšia funkcia v porovnaní so smernicou v-show. Môžeme ho použiť aj na blok šablón, ak nechceme medzi týmto blokom nič vykresliť. Buď je v tom podradená zložka, alebo veľa ďalších prvkov.

Napríklad:

v-else

Môžeme tiež použiť smernicu v-else spolu s príkazom v-if, aby sme podmienene vykreslili medzi ktorýmkoľvek z dvoch blokov. Nezabúdajte však, že blok v-else sa musí objaviť hneď po bloku v-if.

Napríklad:

Tento odsek sa vykreslí, ak sa hodnota „isVar“ stane pravdivou

Inak sa tento odsek vykreslí.

Môžeme použiť v-else aj na blok šablón.

v-else-if

Rovnako ako v-else, môžeme použiť aj smernicu v-else-if spolu so smernicou v-if.

Napríklad:

v-ak vs. v-show

Druhy v-if a v-show robia tú istú úlohu. Obaja skrývajú prvky v DOM na základe nepravdivej alebo falošnej hodnoty odovzdaného výrazu, ale s jemným rozdielom v skrytí a nevykreslení prvkov.

Ak porovnáme čas a náklady na spracovanie medzi týmito dvoma. V-if stojí viac počas behu alebo prepínania, zatiaľ čo v-show stojí viac na začiatku vykresľovania. Bolo by preto rozumné používať v-show, keď je prepínanie účelné. Inak sa dáva prednosť v-if.

Balenie

V tomto článku sme sa naučili, ako podmienene vykresliť DOM vo Vue.js pomocou smerníc v-if a v-else. Ukázali sme niekoľko príkladov a dozvedeli sme sa o skutočnom rozdiele medzi smernicou v-show a v-if. Ak vám tento článok pomôže lepšie porozumieť a porozumieť pojmom, pokračujte v návšteve linuxhint.com pre taký užitočný obsah.