Vue.js este o bibliotecă ușor de învățat și accesibilă, pe care putem începe să construim aplicații web în ea cu cunoștințele de bază despre dezvoltarea web. În Vue.js, dezvoltatorilor le place să codifice și să simtă libertatea în timp ce dezvoltă aplicații.

În orice aplicație web dinamică, redarea condiționată este o parte necesară. Vue.js oferă diferite moduri de redare condiționată și putem folosi oricare dintre următoarele moduri care se potrivesc scopului nostru:

• spectacol v
• v-dacă
• v-else

În acest articol, vom încerca aceste directive furnizate de Vue.js pentru redarea condiționată și înțelegeți-le într-un mod mai bun.

spectacol v

V-show ascunde elementul numai dezactivând vizibilitatea acestuia. Ascunde elementul dacă valoarea expresiei sau variabilei trecute nu este adevărată.

De exemplu:

Acest paragraf nu este ascuns

Acest paragraf este ascuns

v-dacă

Pe de altă parte, v-if nu ascunde elementul, dar, de asemenea, nu redă nimic până când valoarea expresiei sau variabilei trecute devine adevărată.

De exemplu:

Există o caracteristică suplimentară în directiva v-if comparativ cu directiva v-show. Îl putem aplica și blocului șablon dacă nu dorim să redăm nimic între blocul respectiv. Fie există o componentă copil în aceasta, fie o mulțime de alte elemente.

De exemplu:

v-else

De asemenea, putem folosi directiva v-else împreună cu instrucțiunea v-if pentru a reda condiționat între oricare dintre cele două blocuri. Dar, ținând cont de faptul că blocul v-else trebuie să apară imediat după blocul v-if.

De exemplu:

Acest paragraf se va reda dacă „isVar” devine adevărat

Altfel, acest paragraf va fi redat.

Putem aplica v-else și pe blocul șablon.

v-else-if

La fel ca v-else, putem folosi și directiva v-else-if împreună cu directiva v-if.

De exemplu:

v-dacă vs. spectacol v

V-if și v-show fac aceeași sarcină. Amândoi ascund elementele din DOM pe baza valorii adevărate sau false a expresiei trecute, dar cu o diferență subtilă de ascundere și nu de redare a elementelor.

Dacă comparăm timpul și costul de procesare dintre aceste două. V-if-ul costă mai mult în timpul rulării sau comutării, în timp ce v-show costă mai mult la începutul redării. Deci, ar fi înțelept să folosiți v-show atunci când comutarea este un scop. În caz contrar, se preferă v-if.

Înfășurându-se

În acest articol, am învățat cum să redăm condiționat DOM în Vue.js folosind directivele v-if și v-else. Am arătat câteva exemple și am aflat despre diferența reală dintre directiva v-show și v-if. Dacă acest articol vă ajută să aveți o mai bună înțelegere și concepte, continuați să vizitați linuxhint.com pentru un conținut atât de util.