Voorwaardelijke weergave is een cruciaal onderdeel van sjablonen in elke taal. Ontdek de Vue.js-aanpak.

Vue.js is een populair JavaScript-framework waarmee u eenvoudig dynamische webapplicaties kunt maken. Vue.js kan inhoud weergeven op basis van gegevens en gebeurtenissen. Dit is met name handig voor het maken van responsieve en interactieve gebruikersinterfaces.

Leer wat Vue-richtlijnen zijn en hoe u ze kunt gebruiken om voorwaardelijke weergave in Vue.js te bereiken.

Wat zijn Vue-richtlijnen?

Met Vue-richtlijnen kunt u het gedrag van HTML-elementen in Vue.js-sjablonen verbeteren door er unieke attributen aan toe te voegen.

Richtlijnen zijn een fundamenteel onderdeel van Vue.js en bieden een eenvoudige en krachtige manier om de Documentobjectmodel (DOM), voeg dynamisch gedrag toe aan elementen en beheer gegevens.

Bovendien kunt u met Vue.js aangepaste richtlijnen maken, zodat u eenvoudig herbruikbare functies voor Vue-apps kunt maken.

Het Vue-framework prefixeert zijn richtlijnen met "v-" voor de naam van de richtlijn. Voorbeelden van veelgebruikte richtlijnen in Vue zijn onder meer

instagram viewer
v-aan, v-binden, v-voor, En v-als.

Wat is voorwaardelijke weergave?

Met voorwaardelijke weergave kunt u elementen weergeven of verbergen op basis van voorwaarden die u opgeeft. U kunt bijvoorbeeld voorwaardelijke weergave gebruiken om een ​​bericht alleen aan gebruikers weer te geven als ze een geldig e-mailadres hebben ingevoerd.

In Vue.js kunt u richtlijnen gebruiken zoals v-als En v-show om voorwaardelijke weergave in uw toepassing te bereiken, anders dan u zou doen inhoud voorwaardelijk weergeven in React.js.

Voorwaardelijke weergave bereiken met de v-if-richtlijn

Gelijkwaardig aan het javascript als... anders stelling, de v-als richtlijn in Vue.js bevat een voorwaarde. Als hieraan niet wordt voldaan, evalueert Vue.js de volgende voorwaarde gespecificeerd in a v-anders richtlijn en blijft dit doen totdat het aan een voorwaarde voldoet of alle voorwaarden evalueert.

Met deze richtlijn kunt u een element voorwaardelijk renderen op basis van een booleaanse waarde. De Vue.js-compiler geeft het onderdeel niet weer als de waarde onwaar is.

Hier is een voorbeeld van het voorwaardelijk weergeven van inhoud met v-als:

html>
<htmllang="en">
<hoofd>
<titel>Documenttitel>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">script>
hoofd>
<lichaam>
<divID kaart="app">
<h1v-als='vals' >{{ bericht1 }}h1>
<h1v-anders >{{ bericht2 }}h1>
div>
<script>
 const app = Vue.createApp({
 gegevens () {
 opbrengst {
 message1: 'Dit is uw Vue-app.',
 message2: 'Nog geen Vue-app.'
 }
 }
 })
 app.mount('#app')
script>
lichaam>
html>

Het bovenstaande codeblok geeft een Vue-app weer die is gemaakt door een Netwerk voor inhoudslevering (CDN) link naar de hoofdtekst van uw HTML-bestand. De v-if-richtlijn zal het h1-element alleen weergeven als de voorwaarde waar is.

In Vue-apps zijn er situaties waarin u een component moet renderen op basis van specifieke dynamische criteria. Dit is handig in scenario's zoals het alleen weergeven van informatie wanneer een gebruiker op een knop klikt of het weergeven van een laadindicator terwijl gegevens worden geladen vanuit een API.

Bijvoorbeeld:

html>
<htmllang="en">
<hoofd>
<titel>Vue-apptitel>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">script>
hoofd>
<lichaam>
<divID kaart="app">
<divv-als="toonGebruikers">
<ul>
<li>Gebruiker1li>
<li>Gebruiker2li>
ul>
div>
<knopv-aan: klik="toggleToonGebruikers()">
 Schakel tussen gebruikers
knop>
<h1>{{ bericht }}h1>
div>
<script>
 const app = Vue.createApp({
 gegevens () {
 opbrengst {
 showUsers: waar,
 bericht: 'Dit is uw Vue-app.'
 }
 },
 methoden: {
 toggleShowUsers() {
 deze.showUsers = !deze.showUsers
 }
 }
 })
 app.mount('#app')
script>
lichaam>
html>

Het bovenstaande codeblok gebruikt de v-als richtlijn om inhoud voorwaardelijk weer te geven op basis van de waarde van een booleaanse variabele, toon gebruikers.

De div element wordt weergegeven als de waarde is WAAR en verborgen als het is vals. Klikken op de Schakel tussen gebruikers knop activeert de toggleToonGebruikers() methode om de waarde van te wijzigen toon gebruikers.

Dit voorbeeld gebruikt ook de v-aan richtlijn om naar gebeurtenissen te luisteren, zoals een klikgebeurtenis op de knop. Het evalueert opnieuw de v-als richtlijn wanneer de waarde van toon gebruikers veranderingen.

Voorwaardelijke weergave bereiken met de v-show-richtlijn

De v-show richtlijn is een andere manier om elementen in Vue.js voorwaardelijk weer te geven of te verbergen. Het is vergelijkbaar met de v-als richtlijn omdat het elementen kan weergeven op basis van een Booleaanse uitdrukking. Er zijn echter enkele kritische verschillen tussen de twee richtlijnen.

De v-show richtlijn verwijdert het element niet uit de DOM wanneer de expressie resulteert in false. In plaats daarvan gebruikt het CSS om de elementen van het element te wisselen weergave eigendom tussen geen en de oorspronkelijke waarde.

Dit betekent dat het element nog steeds aanwezig is in de DOM, maar niet zichtbaar is wanneer de uitdrukking onwaar is.

Hier is een voorbeeld:

<lichaam>
<divID kaart="app">
<divv-als="toonGebruikers">
<ul>
<li>Gebruiker1li>
<li>Gebruiker2li>
ul>
div>
<knopv-aan: klik="toggleToonGebruikers()">
 Schakel tussen gebruikers
knop>
<h1v-show="toonGebruikers">{{ bericht }}h1>
div>
<script>
 const app = Vue.createApp({
 gegevens () {
 opbrengst {
 showUsers: waar,
 bericht: 'Dit zijn de gebruikers van de Vue-app'
 }
 },
 methoden: {
 toggleShowUsers() {
 deze.showUsers = !deze.showUsers
 }
 }
 })
 app.mount('#app')
script>
lichaam>

Het codeblok hierboven gebruikt de v-show richtlijn om een ​​bericht weer te geven waarin staat: 'Dit zijn de gebruikers van de Vue-app' wanneer u op de schakelknop klikt.

Kiezen tussen v-if en v-show

Bij het kiezen tussen het gebruik van de v-als En v-show richtlijnen om elementen in Vue.js voorwaardelijk weer te geven of te verbergen, zijn er enkele belangrijke factoren waarmee u rekening moet houden.

Wanneer de toestand zelden verandert, gebruikt u de v-als richtlijn is goed. Dit is zo omdat v-als verwijdert het element uit de DOM wanneer de voorwaarde onwaar is, wat optimale prestaties kan belemmeren. Het element wordt pas weergegeven als de voorwaarde waar wordt en verwijderd uit de DOM als de voorwaarde weer onwaar wordt.

Aan de andere kant, als de aandoening vaak zal veranderen, is het beter om de v-show richtlijn, wat de prestaties verbetert. Dit is zo omdat v-show gebruikt CSS om het element te verbergen of weer te geven door de CSS-weergave-eigenschap te schakelen tussen geen en blok, waarbij het element altijd wordt weergegeven in de DOM.

Voorwaardelijke weergave in uw Vue-app gemakkelijk gemaakt

Je hebt geleerd om inhoud voorwaardelijk weer te geven in Vue-apps met de richtlijnen v-if en v-show. Door deze richtlijnen te gebruiken, kunt u snel inhoud weergeven op basis van verschillende voorwaarden, waardoor u meer controle krijgt over het uiterlijk en gedrag van uw Vue-componenten.