Uvod
Ove direktive se ugradjuju kao atribut u željene HTML elemente i mogu da zamene poznatu javascript sintaksu:
|
1 2 3 4 5 6 7 |
if (uslov 1) { ovaj deo koda ce biti izvrsen ako je uslov 1 zadovoljen; } elseif (uslov 2) { ovaj deo koda ce biti izvrsen ako je uslov 1 nije zadovoljen ali uslov 2 jeste; } else { ovaj deo koda ce biti izvrsen ako nije ispunjen ni jedan od prethodna dva uslova } |
Sintaksa i primeri
v-if
Koristi se za kondicionlno renderovanje elementa tj. može da doda i ukloni elemenat iz DOM-a.
|
1 |
<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div> |
NAPOMENA:
Ukoliko se direktiva “v-for” koristi zajedno sa “v-if” na istom elementu, direktiva “v-for” ima viši prioritet od “v-if.“
v-else-if
Element za koji je zakačena direktiva "v-else-if" mora da stoji odmah iza HTML elmenata na koji je zakačena "v-if" direktiva, ako ovo nije ispoštovano Vue.js ga neće prepoznati.
|
1 2 |
<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div> <div v-else-if="Math.random() > 0.5"> Ako je slucajni broj veci od 0.5 videcemo ovaj element</div> |
v-else
Element za koji je zakačena direktiva "v-else" mora da stoji odmah iza HTML elmenata na kojima su zakačene "v-if" ili "v-else-if" direktive, ako ovo nije ispoštovano Vue.js ga neće prepoznati.
|
1 2 3 |
<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div> <div v-else-if="Math.random() > 0.5"> Ako je slucajni broj veci od 0,5 videcemo ovaj element</div> <div v-else>Ako je slucajni broj manji od 0.5 videcemo ovaj div</div> |
Primer
Pošto direktiva v-else mora da bude na elementu koji je odmah iza elementa koji ima “zakačenu” direktivu “if”, ukoliko imamo potrebu da utiče na više elemenata moramo da obavijemo željene elemente sa nekim “wrapper” elementom. Taj wrapper može biti “div” tag, ali je preporuka je da se koristi <template> tag, jer “ne zagadjuje” DOM (tag se ne renderuje ali njegov sadražaj da).
|
1 2 3 4 5 |
<div v-if="Math.random() > 0.5">Ako je slucajni broj veći od 0,5 videcemo ovaj div</div> <template v-else> <h3>Ovo je naslov</h3> <p>Ako je slucajni broj manji od 0,5 videcemo ovaj paragraf i naslov</p> </template> |