Introduction
These directives are embedded as attributes in the desired HTML elements and can replace the familiar javascript syntax:
|
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 } |
Syntax and examples
v-if
It is used for conditional rendering of the element ie. can add and remove an element from the DOM.
|
1 |
<div v-if="Math.random() > 0.8"> Ako je slucajni broj veci od 0,8 videcemo ovaj element</div> |
NOTE:
If the “v-for” directive is used together with “v-if” on the same element, the “v-for” directive takes precedence over “v-if.“
v-else-if
The element to which the "v-else-if" directive is attached must be right after the HTML element to which the "v-if" directive is attached, otherwise Vue.js will not recognize it.
|
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
The element to which the "v-else" directive is attached must be immediately after the HTML elements on which they are attached "v-if" or "v-else-if" directives, if this is not respected Vue.js will not recognize it.
|
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> |
Example
Since the v-else directive must be on the element that is right after the element that has the “if” directive attached to it, if we need to affect more elements, we have to wrap the desired elements with a “wrapper” element. That wrapper can be a “div” tag, but it is recommended to use <template> tag, because it “does not pollute” the DOM (the tag is not rendered, but its content is).
|
1 2 3 4 5 |
<div v-if="Math.random() > 0.5">If the random number is greater than 0.5 we will see this div</div> <template v-else> <h3>This is a title</h3> <p>Ako je slucajni broj manji od 0,5 videcemo ovaj paragraf i naslov</p> </template> |