Redare condiționată/Afișare în Vue cu v-if, v-show, v-else și v-else-if

Introducere

Vue.js este un cadru de aplicații web simplu pentru crearea de interfețe web dinamice și Aplicații pe o singură pagină (SPA). Pe măsură ce creăm aceste aplicații, de multe ori, ne dorim reda ceva pe baza unui anumit criteriu – aceasta este esența redării condiționate.

Redarea condiționată se referă la capacitatea de a reda un marcaj distinct al interfeței cu utilizatorul (UI) în funcție de faptul că o condiție este adevărată sau nu. Această noțiune este frecvent utilizată în contexte precum afișarea sau ascunderea componentelor (comutarea), comutarea funcționalității aplicației, gestionarea autentificării și autorizării și multe altele.

În acest articol, ne vom uita la diferite moduri de redare condiționată în Vue.js utilizând v-if, v-else-if, și v-else directive. De asemenea, vom arunca o privire la câteva exemple și vom evidenția diferența dintre v-if și v-show.

v-dacă

v-if directivă este obișnuită să redă condiționat un bloc adică blocul cu v-if atributul va fi doar produs dacă expresia directivei returnează a true valoare. Dacă expresia produce un rezultat nevalid (de exemplu, null, 0, Șir gol, false), elementul este eliminat din DOM.

Să ilustrăm acest comportament pe exemplul practic:

<div v-if="login"> <p>This user has been logged in!... Welcome.</p>
</div> <script>
export default { data() { return { login: true, }; }
};
</script>

Întrucât login este setat la true, <div> bloc care contine v-if directivă va fi produsă, astfel afișată.

v-dacă vs v-show

Este demn de remarcat faptul că v-show ar funcționa și în exemplul de mai sus și ar funcționa aparent identic, dar există o distincție între cele două.

v-if redă condiționat un element, în timp ce v-show afișează/afișează condiționat un element.

Aceasta înseamnă că atunci când condiționalul este comutat, v-if va șterge și va restaura de fapt componentele wile v-show doar le face invizibile sau vizibile. Următoarea animație ilustrează cum v-if de fapt șterge și reproduce blocurile de cod:

Între timp, v-show va menține întotdeauna elementul în DOM și își va schimba doar CSS-ul pentru a-și comuta aspectul (prin setarea acestuia display la none):

v-altfel

v-else directiva este a v-if directivă care vă permite să personalizați false valoare în redări condiționate. Dacă nu este true, Aveți posibilitatea să utilizați v-else pentru a defini ce ar trebui să se întâmple în schimb.

De exemplu, să presupunem că avem o parolă introdusă și dorim ca aceasta să producă un mesaj de eroare, „Parolă slabă”, dacă lungimea intrării este mai mică de 6 sau afișaj "Parola puternica" dacă lungimea este mai mare de 6.

Aceasta este o randare condiționată, cu o opțiune pentru gestionarea cazului fals:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length > 6">Strong Password</p> <p v-else>Weak Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Să folosim acest lucru pentru a comuta conținutul unei pagini de autentificare simplă, astfel încât să schimbe mesajul în funcție de faptul dacă un utilizator este conectat sau nu. Vom modifica formularea butonului pe baza userLoggedIn starea de asemenea:

<div id="app"> <div v-if="userLoggedIn"> <h2>Hello Welcome!</h2> <p>You have sucessfully logged in to your user account!</p> </div> <div v-else> <p>Please Log In to access your account!</p> </div> <button @click="userLoggedIn = !userLoggedIn"> <p v-if="!userLoggedIn">Login</p> <p v-else>LogOut</p> </button>
</div> <script>
export default { data() { return { userLoggedIn: false }; }
};
</script>

Evenimentul de clic al butonului va comuta userLoggedIn element de date, iar acest lucru va afecta datele afișate după cum se vede mai jos:

v-altfel-dacă

v-else-if extends a v-if cu o else...if bloc. Acesta este similar cu JavaScript else...if bloc prin faptul că ne permite să adăugăm o declarație if la o declarație existentă v-if. Acesta este utilizat atunci când există multe criterii de verificat și poate fi înlănțuit de mai multe ori:

<form> <input type="password" v-model="password" placeholder="Enter your password" /> <p v-if="password.length < 4">Weak Password</p> <p v-else-if="password.length < 7">Fairly Strong Password</p> <p v-else>Strong Password</p>
</form> <script>
export default { data() { return { password: "" }; }
};
</script>

Concluzie

În acest articol, am văzut cum să redăm condiționat un element cu v-if, v-else, și v-else-if. Am explicat și diferența dintre v-if și v-show.

• Coinsmart. Cel mai bun schimb de Bitcoin și Crypto din Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. ACCES LIBER.
• CryptoHawk. Radar Altcoin. Încercare gratuită.
• Sursa: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/