Vue.js je enostavna za učenje in dostopna knjižnica, v kateri lahko začnemo graditi spletne aplikacije z osnovnim znanjem spletnega razvoja. V Vueju.js, razvijalci radi razvijajo programe in kodirajo ter čutijo svobodo.

V kateri koli dinamični spletni aplikaciji je pogojno upodabljanje nujen del. Vue.js ponuja različne načine pogojnega upodabljanja in lahko uporabimo katerega koli od naslednjih načinov, ki ustrezajo našemu namenu:

• v-show
• v-if
• v-drugo

V tem članku bomo preizkusili te smernice, ki jih ponuja Vue.js za pogojno upodabljanje in jih bolje razumemo.

v-show

V-show skriva element samo tako, da onemogoči njegovo vidnost. Skriva element, če vrednost prenesenega izraza ali spremenljivke ni neskladna.

Na primer:

Ta odstavek ni skrit

Ta odstavek je skrit

v-if

Po drugi strani pa v-if ne skriva elementa, vendar tudi ne upodablja ničesar, dokler vrednost prenesenega izraza ali spremenljivke ne postane true.

Na primer:

V direktivi v-if je dodatna funkcija v primerjavi z direktivo v-show. Lahko ga uporabimo tudi za blok predloge, če med tem blokom ne želimo upodabljati ničesar. Ali je v tem podrejena komponenta ali veliko drugih elementov.

Na primer:

v-drugo

Direktivo v-else lahko skupaj s stavkom v-if uporabimo tudi za pogojno upodabljanje med katerim koli blokom. Vendar ne pozabite, da se mora blok v-else pojaviti takoj za blokom v-if.

Na primer:

Ta odstavek bo upodobljen, če 'isVar' postane resničen

V nasprotnem primeru bo ta odstavek upodobljen.

V-else lahko uporabimo tudi na bloku predloge.

v-else-if

Tako kot v-else lahko tudi z direktivo v-if uporabimo direktivo v-else-if.

Na primer:

v-if vs. v-show

V-if in v-show opravljata isto nalogo. Oba skrivata elemente v DOM na podlagi neresnične ali napačne vrednosti posredovanega izraza, vendar z rahlo razliko med skrivanjem in ne upodabljanjem elementov.

Če primerjamo čas in stroške obdelave med tema dvema. V-if stane več med izvajanjem ali preklapljanjem, medtem ko v-show stane več na začetku upodabljanja. Zato bi bilo pametno uporabiti v-show, kadar je preklop namenjen. V nasprotnem primeru je v-if prednostna.

Zavijanje

V tem članku smo se naučili, kako DOM v Vueju pogojno upodobiti.js z uporabo v-if in v-else direktiv. Pokazali smo nekaj primerov in spoznali resnično razliko med direktivo v-show in v-if. Če vam ta članek pomaga do boljšega razumevanja in konceptov, nadaljujte z obiskom linuxhint.com za tako uporabno vsebino.