Cum se implementează randarea condiționată în Vue.js

Vue.js este un cadru JavaScript popular care facilitează crearea de aplicații web dinamice. Vue.js poate reda conținut pe baza datelor și evenimentelor. Acest lucru este util în special pentru crearea de interfețe de utilizator receptive și interactive.

Aflați ce sunt directivele Vue și cum să le utilizați pentru a obține randarea condiționată în Vue.js.

Ce sunt directivele Vue?

Directivele Vue vă permit să îmbunătățiți comportamentul elementelor HTML în șabloanele Vue.js prin adăugarea de atribute unice acestora.

Directivele sunt o parte fundamentală a Vue.js și oferă o modalitate simplă și puternică de a manipula Document Object Model (DOM), adăugați un comportament dinamic elementelor și gestionați datele.

În plus, Vue.js vă permite să creați directive personalizate, permițându-vă să creați cu ușurință funcții reutilizabile pentru aplicațiile Vue.

Cadrul Vue prefixează directivele sale cu

"v-" înainte de numele directivei. Exemple de directive utilizate în mod obișnuit în Vue includ v-on, v-bind, v-pentru, și v-dacă.

Ce este redarea condiționată?

Redarea condiționată vă permite să afișați sau să ascundeți elemente în funcție de condițiile pe care le specificați. De exemplu, puteți utiliza redarea condiționată pentru a afișa un mesaj utilizatorilor numai dacă aceștia au introdus o adresă de e-mail validă.

În Vue.js, puteți utiliza directive precum v-dacă și v-show pentru a realiza randarea condiționată în aplicația dvs., diferită de modul în care ați face-o redați conținutul condiționat în React.js.

Realizarea redării condiționate cu Directiva v-if

Similar cu JavaScript daca...altfel afirmație, cel v-dacă directiva din Vue.js deține o condiție. Dacă nu este satisfăcut, Vue.js evaluează următoarea condiție specificată în a v-altfel directivă și continuă să facă acest lucru până când fie întrunește o condiție, fie evaluează toate condițiile.

Această directivă vă permite să redați condiționat un element pe baza unei valori booleene. Compilatorul Vue.js nu va reda partea dacă valoarea acesteia este falsă.

Iată un exemplu de redare condiționată a conținutului cu v-dacă:

html>
<htmllang="ro">
<cap>
<titlu>Documenttitlu>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenariu>
cap>
<corp>
<divid=„aplicație”>
<h1v-dacă='fals' >{{ mesaj1 }}h1>
<h1v-altfel >{{ mesaj2 }}h1>
div>
<scenariu>
 const app = Vue.createApp({
 date () {
 întoarcere {
 mesaj1: „Aceasta este aplicația ta Vue.”,
 mesaj2: „Nu este încă o aplicație Vue”.
 }
 }
 })
 app.mount('#app')
scenariu>
corp>
html>

Blocul de cod de mai sus prezintă o aplicație Vue creată prin adăugarea unui Rețeaua de livrare de conținut (CDN) link către corpul fișierului HTML. Directiva v-if va reda elementul h1 numai dacă condiția sa este adevărată.

În aplicațiile Vue, există situații în care trebuie să redați o componentă pe baza unor criterii dinamice specifice. Acest lucru este util în scenarii precum afișarea informațiilor numai atunci când un utilizator face clic pe un buton sau afișarea unui indicator de încărcare în timp ce datele se încarcă dintr-un API.

De exemplu:

html>
<htmllang="ro">
<cap>
<titlu>Aplicația Vuetitlu>
<scenariusrc=" https://unpkg.com/vue@3/dist/vue.global.js">scenariu>
cap>
<corp>
<divid=„aplicație”>
<divv-dacă=„showUsers”>
<ul>
<li>Utilizator1li>
<li>Utilizator2li>
ul>
div>
<butonv-on: faceți clic=„toggleShowUsers()”>
 Comutați utilizatori
buton>
<h1>{{ mesaj }}h1>
div>
<scenariu>
 const app = Vue.createApp({
 date () {
 întoarcere {
 showUtilizatori: adevărat,
 mesaj: „Aceasta este aplicația ta Vue”.
 }
 },
 metode: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
scenariu>
corp>
html>

Blocul de cod de mai sus folosește v-dacă directivă de redare condiționată a conținutului pe baza valorii unei variabile booleene, arataUtilizatori.

The div elementul este afișat dacă valoarea este Adevărat și ascuns dacă este fals. Făcând clic pe Comutați utilizatori butonul declanșează toggleShowUsers() metoda de modificare a valorii arataUtilizatori.

Acest exemplu folosește și v-on directivă de a asculta evenimente, cum ar fi un eveniment de clic pe buton. Se reevaluează v-dacă directivă ori de câte ori valoarea de arataUtilizatori schimbări.

Realizarea redării condiționate cu Directiva v-show

The v-show directiva este o altă modalitate de a afișa sau ascunde elemente în Vue.js în mod condiționat. Este asemănător cu v-dacă directivă prin faptul că poate reda elemente bazate pe o expresie booleană. Cu toate acestea, există unele diferențe critice între cele două directive.

The v-show directiva nu elimină elementul din DOM atunci când expresia este evaluată ca false. În schimb, folosește CSS pentru a comuta elementele afişa proprietate între nici unul și valoarea sa inițială.

Aceasta înseamnă că elementul este încă prezent în DOM, dar nu este vizibil atunci când expresia este falsă.

Iată un exemplu:

<corp>
<divid=„aplicație”>
<divv-dacă=„showUsers”>
<ul>
<li>Utilizator1li>
<li>Utilizator2li>
ul>
div>
<butonv-on: faceți clic=„toggleShowUsers()”>
 Comutați utilizatori
buton>
<h1v-show=„showUsers”>{{ mesaj }}h1>
div>
<scenariu>
 const app = Vue.createApp({
 date () {
 întoarcere {
 showUtilizatori: adevărat,
 mesaj: „Aceștia sunt utilizatorii aplicației Vue”
 }
 },
 metode: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
scenariu>
corp>

Blocul de cod de mai sus folosește v-show directivă pentru a afișa un mesaj care spune „Aceștia sunt utilizatorii aplicației Vue” oricând faceți clic pe butonul de comutare.

Alegerea dintre v-if și v-show

Când decideți între utilizarea v-dacă și v-show directive pentru a afișa sau ascunde elemente în Vue.js în mod condiționat, există câțiva factori importanți de luat în considerare.

Când starea se schimbă rar, folosind v-dacă directiva este buna. Asta pentru ca v-dacă elimină elementul din DOM atunci când condiția este falsă, ceea ce poate împiedica performanța optimă. Elementul este redat doar odată ce condiția devine adevărată și eliminată din DOM atunci când condiția devine din nou falsă.

Pe de altă parte, dacă este posibil ca starea să se schimbe frecvent, este mai bine să utilizați v-show directivă, care îmbunătățește performanța. Asta pentru ca v-show folosește CSS pentru a ascunde sau afișa elementul prin comutarea proprietății de afișare CSS între none și block, lăsând elementul întotdeauna redat în DOM.

Redarea condiționată în aplicația ta Vue este ușoară

Ați învățat să redați conținut condiționat în aplicațiile Vue cu directivele v-if și v-show. Folosind aceste directive, puteți reda rapid conținutul în funcție de diferite condiții, oferindu-vă mai mult control asupra aspectului și comportamentului componentelor dumneavoastră Vue.