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

Introduktion

Vue.js er en simpel webapp-ramme til at skabe dynamiske webgrænseflader og Single-Page Apps (SPA'er). Når vi opretter disse apps, vil vi ofte gerne gengive noget ud fra et bestemt kriterium – dette er essensen af ​​betinget gengivelse.

Betinget gengivelse refererer til evnen til at gengive distinkt brugergrænseflade-markering (UI) baseret på, om en betingelse er sand eller ej. Dette begreb bruges ofte i sammenhænge som at vise eller skjule komponenter (skifte), skifte applikationsfunktionalitet, håndtere godkendelse og godkendelse og mange flere.

I denne artikel vil vi se på forskellige måder til betinget gengivelse i Vue.js ved at bruge v-if, v-else-ifog v-else direktiver. Vi vil også tage et kig på nogle eksempler og fremhæve forskellen mellem v-if , v-show.

v-if

v-if direktiv er vant til betinget gengive en blok betyder blokken med v-if attribut vil kun være produceret hvis direktivets udtryk returnerer en true værdi. Hvis udtrykket giver et ugyldigt resultat (f.eks. null, 0, tom streng, false), elementet er slettet fra DOM.

Lad os illustrere denne adfærd med det praktiske eksempel:

<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 sat til true, <div> blok indeholdende v-if direktiv vil blive produceret, således vist.

v-if vs v-show

Det er værd at bemærke, at v-show ville også fungere i eksemplet ovenfor og ville fungere tilsyneladende identisk, men der er en forskel mellem de to.

v-if betinget gengiver et element, hvorimod v-show viser/viser betinget et element.

Dette indebærer, at når det betingede skiftes, v-if vil faktisk slette og gendanne komponenter wile v-show gør dem bare usynlige eller synlige. Følgende animation illustrerer hvordan v-if faktisk sletter og reproducerer kodeblokke:

I mellemtiden v-show vil altid vedligeholde elementet i DOM og vil blot ændre dets CSS for at skifte dets udseende (ved at indstille dets display til none):

v-else

v-else direktiv er en v-if direktiv, der giver dig mulighed for at tilpasse false værdi i betingede gengivelser. Hvis det ikke er det true, Kan du bruge v-else at definere, hvad der skal ske i stedet.

Antag for eksempel, at vi har en adgangskodeinput, og vi ønsker, at den skal producere en fejlmeddelelse, "Svagt kodeord", hvis længden af ​​input er mindre end 6 eller display "Stærk adgangskode" hvis længden er større end 6.

Dette er en betinget gengivelse med mulighed for håndtering af den falske sag:

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

Lad os bruge dette til at skifte mellem indholdet af en simpel login-side, så den ændrer meddelelsen baseret på, om en bruger er logget ind eller ej. Vi ændrer knappens ordlyd baseret 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 klikhændelse vil skifte til userLoggedIn dataelement, og dette vil påvirke de viste data som vist nedenfor:

v-else-hvis

v-else-if extends a v-if med en else...if blok. Dette ligner JavaScript's else...if blokere, at det giver os mulighed for at tilføje en if-sætning til en eksisterende v-if. Dette bruges, når der er mange kriterier at kontrollere og kan kædes sammen flere gange:

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

Konklusion

I denne artikel har vi set, hvordan man betinget gengiver et element med v-if, v-elseog v-else-if. Vi forklarede også forskellen mellem v-if , v-show.

• Coinsmart. Europas bedste Bitcoin og Crypto Exchange.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. FRI ADGANG.
• CryptoHawk. Altcoin radar. Gratis prøveversion.
• Kilde: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/