Vue.js on helposti opittava ja helposti lähestyttävä kirjasto, jonka avulla voimme aloittaa verkkosovellusten rakentamisen perustietojen avulla verkkokehityksestä. Vue.Kehittäjät rakastavat koodata ja tuntevat vapautta sovelluksia kehittäessään.

Kaikissa dynaamisissa verkkosovelluksissa ehdollinen renderointi on välttämätön osa. Vue.js tarjoaa erilaisia ​​tapoja ehdolliseen renderointiin, ja voimme käyttää mitä tahansa seuraavista tavoihimme sopivista tavoista:

• v-show
• v-jos
• v-muu

Tässä artikkelissa kokeilemme näitä Vuen toimittamia direktiivejä.js ehdolliseen renderointiin ja ymmärrä ne paremmin.

v-show

V-show piilottaa elementin vain estämällä sen näkyvyyden. Se piilottaa elementin, jos välitetyn lausekkeen tai muuttujan arvo ei ole totta.

Esimerkiksi:

Tätä kohtaa ei ole piilotettu

Tämä kohta on piilotettu

v-jos

Toisaalta v-if ei piilota elementtiä, mutta se ei myöskään renderoi mitään, ennen kuin välitetyn lausekkeen tai muuttujan arvosta tulee totta.

Esimerkiksi:

V-if-direktiivissä on lisäominaisuus verrattuna v-show-direktiiviin. Voimme soveltaa sitä myös mallilohkoon, jos emme halua tehdä mitään lohkon väliin. Joko siinä on lapsikomponentti tai paljon muita elementtejä.

Esimerkiksi:

v-muu

Voimme myös käyttää v-else-direktiiviä yhdessä v-if-lauseen kanssa renderoimiseksi ehdollisesti minkä tahansa kahden lohkon välillä. Mutta pitäen mielessä, että v-else-lohkon on oltava näkyvissä heti v-if-lohkon jälkeen.

Esimerkiksi:

Tämä kappale näkyy, jos 'isVar' tulee totta

Muuten tämä kappale renderöidään.

Voimme käyttää v-elseä myös mallilohkossa.

v-else-if

Aivan kuten v-else, voimme käyttää myös v-else-if-direktiiviä yhdessä v-if-direktiivin kanssa.

Esimerkiksi:

v-jos vs. v-show

V-if ja v-show tekevät saman tehtävän. Ne molemmat piilottavat DOM: n elementit välitetyn lausekkeen tosi- tai vääräarvon perusteella, mutta piilossa ja jättämättä elementtejä erotetaan hienovaraisesti.

Jos verrataan näiden kahden aikaa ja käsittelykustannuksia. V-if maksaa enemmän ajon aikana tai vaihdettaessa, kun taas v-show maksaa enemmän renderoinnin alkaessa. Joten olisi viisasta käyttää v-showta, kun vaihtaminen on tarkoitusta. Muussa tapauksessa v-if on edullinen.

Käärimistä

Tässä artikkelissa olemme oppineet DOM: n ehdollisen renderoinnin Vue-sivustossa.js käyttäen v-if- ja v-else-direktiivejä. Olemme esittäneet joitain esimerkkejä ja oppineet todellisesta erosta v-show- ja v-if-direktiivien välillä. Jos tämä artikkeli auttaa sinua ymmärtämään paremmin ja käsitteitä, jatka vierailua linuxhintissa.com niin hyödyllistä sisältöä.