Ehdollinen renderöinti/näyttö Vuessa v-if, v-show, v-else ja v-else-if kanssa

esittely

Vue.js on yksinkertainen verkkosovelluskehys dynaamisten verkkokäyttöliittymien luomiseen ja Yksisivuiset sovellukset (SPA). Kun luomme näitä sovelluksia, haluamme usein tehdä jotain tiettyjen kriteerien perusteella – Tämä on ehdollisen renderoinnin ydin.

Ehdollinen renderöinti tarkoittaa kykyä hahmontaa erillinen käyttöliittymämerkintä sen perusteella, onko ehto tosi vai ei. Tätä käsitettä käytetään usein yhteyksissä, kuten komponenttien näyttämisessä tai piilottamisessa (vaihtaminen), sovellustoimintojen vaihtamisessa, todennuksen ja valtuutuksen käsittelyssä ja monissa muissa.

Tässä artikkelissa tarkastellaan erilaisia ​​tapoja ehdolliseen hahmontamiseen Vue.js:ssä käyttämällä v-if, v-else-ifja v-else direktiivit. Tarkastelemme myös joitain esimerkkejä ja korostamme eroa niiden välillä v-if ja v-show.

v-jos

- v-if direktiiviin on totuttu ehdollisesti renderöi lohkon tarkoittaa lohkoa v-if attribuutti on vain valmistettu jos direktiivin lauseke palauttaa a true arvo. Jos lauseke tuottaa virheellisen tuloksen (esim. null, 0, tyhjä merkkijono, false), elementti on Poistetaan DOM:sta.

Havainnollistetaan tätä käyttäytymistä käytännön esimerkillä:

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

Koska login asetetaan true, The <div> sisältävä lohko v-if direktiivi tuotetaan, joten se näytetään.

v-jos vs v-show

On syytä huomata, että v-show toimisi myös yllä olevassa esimerkissä ja toimisi näennäisesti identtisesti, mutta näiden kahden välillä on ero.

v-if ehdollisesti renderöi elementti, kun taas v-show ehdollisesti näyttää/näyttää elementti.

Tämä tarkoittaa, että kun ehtoa vaihdetaan, v-if todella poistaa ja palauttaa komponentit wile v-show vain tekee niistä näkymättömiä tai näkyviä. Seuraava animaatio havainnollistaa kuinka v-if itse asiassa poistaa ja toistaa koodilohkot:

Samaan aikaan, v-show säilyttää elementin aina DOM:ssa ja muuttaa vain sen CSS:ää vaihtaakseen sen ulkonäköä (asettamalla sen display että none):

v-else

- v-else direktiivi on a v-if direktiivi, jonka avulla voit mukauttaa false arvo ehdollisissa hahmonnuksissa. Jos se ei ole true, Voit käyttää v-else määritellä, mitä sen sijaan pitäisi tapahtua.

Oletetaan esimerkiksi, että meillä on salasanasyöte ja haluamme sen tuottavan virheilmoituksen, "Heikko salasana", jos syötteen pituus on alle 6 tai näyttö "Vahva salasana" jos pituus on suurempi kuin 6.

Tämä on ehdollinen renderöinti, jossa on mahdollisuus käsitellä väärää tapausta:

<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>

Hyödynnetään tätä yksinkertaisen kirjautumissivun sisällön vaihtamiseen niin, että se muuttaa viestin sen mukaan, onko käyttäjä kirjautunut sisään vai ei. Muokkaamme painikkeen sanamuotoa userLoggedIn myös tila:

<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>

Painikkeen napsautustapahtuma vaihtaa userLoggedIn tietokohde, ja tämä vaikuttaa näytettäviin tietoihin seuraavasti:

v-else-if

v-else-if extends a v-if kanssa else...if lohko. Tämä on samanlainen kuin JavaScriptin else...if lohko, koska sen avulla voimme lisätä if-lauseen olemassa olevaan v-if. Tätä käytetään, kun tarkistettavia kriteerejä on monia, ja se voidaan ketjuttaa useita kertoja:

<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>

Yhteenveto

Tässä artikkelissa olemme nähneet, kuinka elementti hahmonnetaan ehdollisesti käyttämällä v-if, v-elseja v-else-if. Selitimme myös eron v-if ja v-show.

• Coinsmart. Euroopan paras Bitcoin- ja kryptopörssi.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. VAPAA PÄÄSY.
• CryptoHawk. Altcoinin tutka. Ilmainen kokeilu.
• Lähde: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/