Voorwaardelijke weergave/weergave in Vue met v-if, v-show, v-else en v-else-if

Introductie

Vue.js is een eenvoudig webapp-framework voor het maken van dynamische webinterfaces en Single-Page Apps (SPA's). Terwijl we deze apps maken, willen we dat vaak iets weergeven op basis van een bepaald criterium – dit is de essentie van voorwaardelijke weergave.

Voorwaardelijke weergave verwijst naar de mogelijkheid om afzonderlijke markeringen van de gebruikersinterface (UI) weer te geven op basis van het feit of een voorwaarde waar is of niet. Dit begrip wordt vaak gebruikt in contexten zoals het tonen of verbergen van componenten (toggle), schakelen tussen applicatiefunctionaliteit, het afhandelen van authenticatie en autorisatie, en nog veel meer.

In dit artikel bekijken we verschillende manieren om voorwaardelijk weer te geven in Vue.js met behulp van de v-if, v-else-if en v-else richtlijnen. We zullen ook enkele voorbeelden bekijken en het verschil tussen de v-if en v-show.

v-als

De v-if richtlijn gewend is voorwaardelijk een blok renderen dus het blok met de v-if attribuut zal alleen zijn geproduceerd als de uitdrukking van de richtlijn a retourneert true waarde. Als de uitdrukking een ongeldig resultaat oplevert (bijvoorbeeld null, 0, lege string, false), het onderdeel is verwijderde van de DOM.

Laten we dit gedrag illustreren aan de hand van het praktische voorbeeld:

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

Sinds login is ingesteld op true <div> blok bevat v-if richtlijn zal worden geproduceerd, dus weergegeven.

v-als vs v-show

Het is vermeldenswaard dat de v-show zou ook werken in het bovenstaande voorbeeld en zou schijnbaar identiek functioneren, maar er is een onderscheid tussen de twee.

v-if voorwaardelijk rendert een element, terwijl v-show voorwaardelijk toont/toont een element.

Dit houdt in dat wanneer de voorwaardelijke is omgeschakeld, v-if zal componenten daadwerkelijk verwijderen en herstellen v-show maakt ze gewoon onzichtbaar of zichtbaar. De volgende animatie illustreert hoe v-if verwijdert en reproduceert eigenlijk codeblokken:

Ondertussen v-show behoudt altijd het element in de DOM en verandert alleen de CSS om het uiterlijk te wijzigen (door de display naar none):

v-anders

De v-else richtlijn is een v-if richtlijn waarmee u de false waarde in voorwaardelijke weergaven. Als dat niet zo is true, Kunt u gebruik maken v-else bepalen wat er in plaats daarvan moet gebeuren.

Stel bijvoorbeeld dat we een wachtwoord hebben ingevoerd en we willen dat dit een foutmelding oplevert, "Zwak wachtwoord", als de lengte van de invoer kleiner is dan 6 of weergave "Sterk wachtwoord" als de lengte groter is dan 6.

Dit is een voorwaardelijke weergave, met een optie voor het afhandelen van de false-case:

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

Laten we dit gebruiken om de inhoud van een eenvoudige inlogpagina te schakelen, zodat het bericht verandert op basis van het feit of een gebruiker is ingelogd of niet. We passen de formulering van de knop aan op basis van de userLoggedIn staat ook:

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

De klikgebeurtenis van de knop schakelt de userLoggedIn gegevensitem, en dit heeft invloed op de gegevens die worden weergegeven, zoals hieronder te zien is:

v-anders-als

v-else-if extends a v-if een else...if blok. Dit is vergelijkbaar met dat van JavaScript else...if blok in die zin dat het ons in staat stelt om een ​​if statement toe te voegen aan een bestaand v-if. Dit wordt gebruikt wanneer er veel criteria zijn om te controleren en kan meerdere keren worden gekoppeld:

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

Conclusie

In dit artikel hebben we gezien hoe u een element voorwaardelijk kunt weergeven met v-if, v-else en v-else-if. Ook hebben we het verschil tussen uitgelegd v-if en v-show.

• Coinsmart. Europa's beste Bitcoin- en crypto-uitwisseling.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. GRATIS TOEGANG.
• CryptoHawk. Altcoin-radar. Gratis proefversie.
• Bron: https://stackabuse.com/conditional-rendering-in-vue-with-v-if-v-show-v-else-and-v-else-if/