Betinget gjengivelse/visning i Vue med v-if, v-show, v-else og v-else-if

Introduksjon

Vue.js er et enkelt nettapprammeverk for å lage dynamiske nettgrensesnitt og Enkeltside-apper (SPA-er). Når vi lager disse appene, vil vi ofte gjengi noe basert på et bestemt kriterium – dette er essensen av betinget gjengivelse.

Betinget gjengivelse refererer til muligheten til å gjengi distinkt brukergrensesnitt (UI) markering basert på om en betingelse er sann eller ikke. Denne ideen brukes ofte i sammenhenger som å vise eller skjule komponenter (veksle), bytte applikasjonsfunksjonalitet, håndtere autentisering og autorisasjon og mange flere.

I denne artikkelen skal vi se på ulike måter for betinget gjengivelse i Vue.js ved å bruke v-if, v-else-ifog v-else direktiver. Vi vil også ta en titt på noen eksempler og fremheve forskjellen mellom v-if og v-show.

v-if

De v-if direktiv er vant til betinget gjengi en blokk betyr blokken med v-if attributt vil bare være produsert dersom direktivets uttrykk returnerer en true verdi. Hvis uttrykket gir et ugyldig resultat (f.eks. null, 0, tom streng, false), elementet er slettet fra DOM.

La oss illustrere denne oppførselen med det praktiske eksemplet:

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

Siden login er satt til trueden <div> blokk som inneholder v-if direktiv vil bli produsert, og dermed vist.

v-if vs v-show

Det er verdt å merke seg at v-show vil også fungere i eksemplet ovenfor og vil fungere tilsynelatende identisk, men det er et skille mellom de to.

v-if gjengir betinget et element, mens v-show viser/viser betinget et element.

Dette innebærer at når det betingede er vekslet, v-if vil faktisk slette og gjenopprette komponenter wile v-show gjør dem bare usynlige eller synlige. Følgende animasjon illustrerer hvordan v-if faktisk sletter og reproduserer kodeblokker:

I mellomtiden, v-show vil alltid opprettholde elementet i DOM og vil bare endre CSS for å bytte utseende (ved å angi dets display til none):

v-else

De v-else direktivet er en v-if direktiv som lar deg tilpasse false verdi i betingede gjengivelser. Hvis det ikke er det true, Kan du bruke v-else å definere hva som skal skje i stedet.

Anta for eksempel at vi har et passordinndata, og vi vil at det skal produsere en feilmelding, "Svakt passord", hvis lengden på inngangen er mindre enn 6 eller display "Sterkt passord" hvis lengden er større enn 6.

Dette er en betinget gjengivelse, med et alternativ for å håndtere den falske saken:

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

La oss bruke dette til å bytte innhold på en enkel påloggingsside slik at den endrer meldingen basert på om en bruker er pålogget eller ikke. Vi endrer knappens ordlyd basert på userLoggedIn status også:

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

Knappens klikkhendelse vil veksle mellom userLoggedIn dataelement, og dette vil påvirke dataene som vises som vist nedenfor:

v-else-hvis

v-else-if extends a v-if med en else...if blokkere. Dette ligner på JavaScript else...if blokk ved at den lar oss legge til en if-setning til en eksisterende v-if. Dette brukes når det er mange kriterier å sjekke og kan lenkes flere ganger:

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

konklusjonen

I denne artikkelen har vi sett hvordan du betinget gjengir et element med v-if, v-elseog v-else-if. Vi forklarte også forskjellen mellom v-if og v-show.

• Myntsmart. Europas beste Bitcoin og Crypto Exchange.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. FRI TILGANG.
• CryptoHawk. Altcoin Radar. Gratis prøveperiode.
• Kilde: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/