Vue.js je biblioteka koja se lako nauči i koja joj je pristupačna, te u njoj možemo započeti izgradnju web aplikacija s osnovnim znanjem o web razvoju. U Vueu.js, programeri vole kodirati i osjećaju slobodu tijekom razvoja aplikacija.

U bilo kojoj dinamičkoj web aplikaciji uvjetni prikaz nužan je dio. Vue.js nudi različite načine uvjetnog prikazivanja, a mi možemo koristiti bilo koji od sljedećih načina koji odgovaraju našoj svrsi:

• v-show
• v-ako
• v-ostalo

U ovom ćemo članku isprobati ove smjernice koje je pružio Vue.js za uvjetno prikazivanje i razumjeti ih na bolji način.

v-show

V-show skriva element samo onemogućavanjem njegove vidljivosti. Skriva element ako vrijednost prenesenog izraza ili varijable nije neispravna.

Na primjer:

Ovaj odlomak nije skriven

Ovaj je odlomak skriven

v-ako

S druge strane, v-if ne skriva element, ali također ne prikazuje ništa sve dok vrijednost prosljeđenog izraza ili varijable ne postane istinita.

Na primjer:

U v-if direktivi postoji dodatna značajka u usporedbi s v-show direktivom. Možemo ga primijeniti i na blok predloška ako ne želimo prikazati ništa između tog bloka. Ili u tom elementu postoji podređena komponenta ili u puno drugih elemenata.

Na primjer:

v-ostalo

Također možemo koristiti v-else direktivu zajedno s v-if naredbom kako bismo se uvjetno prikazali između bilo kojeg od dva bloka. Ali, imajući na umu da se blok v-else mora pojaviti odmah nakon bloka v-if.

Na primjer:

Ovaj će se odlomak prikazati ako 'isVar' postane istina

Inače, ovaj će se odlomak prikazati.

V-else možemo primijeniti i na blok predloška.

v-ostalo-ako

Baš kao i v-else, također možemo koristiti v-else-if direktivu zajedno s v-if direktivom.

Na primjer:

v-ako vs. v-show

V-if i v-show rade isti zadatak. Oboje skrivaju elemente u DOM-u na temelju istinite ili lažne vrijednosti prosljeđenog izraza, ali s suptilnom razlikom skrivanja i ne prikazivanja elemenata.

Ako usporedimo vrijeme i troškove obrade između ove dvije. V-if košta više tijekom izvođenja ili prebacivanja, dok v-show košta više na početku prikazivanja. Dakle, bilo bi pametno koristiti v-show kad je prebacivanje svrha. Inače, v-if je poželjniji.

Završavati

U ovom smo članku naučili kako uvjetno prikazati DOM u Vueu.js koristeći v-if i v-else direktive. Pokazali smo nekoliko primjera i naučili o stvarnoj razlici između v-show i v-if direktive. Ako vam ovaj članak pomaže da bolje razumijete i koncepte, nastavite posjetiti linuxhint.com za tako koristan sadržaj.