Hur man implementerar villkorlig rendering i Vue.js

Vue.js är ett populärt JavaScript-ramverk som gör det enkelt att skapa dynamiska webbapplikationer. Vue.js kan rendera innehåll baserat på data och händelser. Detta är särskilt användbart för att skapa responsiva och interaktiva användargränssnitt.

Lär dig vad Vue-direktiv är och hur du använder dem för att uppnå villkorlig rendering i Vue.js.

Vad är Vue-direktiv?

Vue-direktiv låter dig förbättra beteendet hos HTML-element i Vue.js-mallar genom att lägga till unika attribut till dem.

Direktiv är en grundläggande del av Vue.js och ger ett enkelt och kraftfullt sätt att manipulera Document Object Model (DOM), lägg till dynamiskt beteende till element och hantera data.

Dessutom låter Vue.js dig skapa anpassade direktiv, vilket gör att du enkelt kan skapa återanvändbara funktioner för Vue-appar.

Vue-ramverket har prefix till sina direktiv "v-" före direktivets namn. Exempel på vanligt använda direktiv i Vue inkluderar v-på, v-binda, v-för, och v-if.

Vad är villkorlig rendering?

Villkorlig rendering låter dig visa eller dölja element baserat på villkor du anger. Du kan till exempel använda villkorlig rendering för att endast visa ett meddelande för användare om de har angett en giltig e-postadress.

I Vue.js kan du använda direktiv som t.ex v-if och v-show för att uppnå villkorlig rendering i din applikation, annorlunda än hur du skulle rendera innehåll villkorligt i React.js.

Att uppnå villkorlig återgivning med v-if-direktivet

Liknande JavaScript om annat påstående, den v-if direktiv i Vue.js innehåller ett villkor. Om det inte är uppfyllt, utvärderar Vue.js följande villkor som anges i a v-annat direktivet och fortsätter att göra det tills det antingen uppfyller ett villkor eller utvärderar alla villkor.

Detta direktiv låter dig villkorligt rendera ett element baserat på ett booleskt värde. Vue.js-kompilatorn renderar inte delen om dess värde är falskt.

Här är ett exempel på att rendera innehåll villkorligt med v-if:

html>
<htmllang="en">
<huvud>
<titel>Dokumenteratitel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
huvud>
<kropp>
<divid="app">
<h1v-if='falsk' >{{ meddelande1 }}h1>
<h1v-annat >{{ meddelande2 }}h1>
div>
<manus>
 const app = Vue.createApp({
 data () {
 lämna tillbaka {
 meddelande1: 'Detta är din Vue-app.',
 meddelande2: 'Inte ännu en Vue-app.'
 }
 }
 })
 app.mount('#app')
manus>
kropp>
html>

Kodblocket ovan visar en Vue-app skapad genom att lägga till en Content Delivery Network (CDN) länk till din HTML-fils kropp. v-if-direktivet återger h1-elementet endast om dess villkor är sant.

I Vue-appar finns det situationer där du behöver rendera en komponent baserat på specifika dynamiska kriterier. Detta är användbart i scenarier som att endast visa information när en användare klickar på en knapp eller visa en laddningsindikator medan data laddas från ett API.

Till exempel:

html>
<htmllang="en">
<huvud>
<titel>Vue apptitel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
huvud>
<kropp>
<divid="app">
<divv-if="showUsers">
<ul>
<li>Användare 1li>
<li>Användare 2li>
ul>
div>
<knappv-on: klicka="toggleShowUsers()">
 Växla Användare
knapp>
<h1>{{ meddelande }}h1>
div>
<manus>
 const app = Vue.createApp({
 data () {
 lämna tillbaka {
 showUsers: sant,
 meddelande: 'Detta är din Vue-app.'
 }
 },
 metoder: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
manus>
kropp>
html>

Ovanstående kodblock använder v-if direktiv för att villkorligt återge innehåll baserat på värdet av en boolesk variabel, visaAnvändare.

De div element visas om värdet är Sann och dold om det är det falsk. Genom att klicka på Växla Användare knappen utlöser toggleShowUsers() metod för att ändra värdet på visaAnvändare.

Detta exempel använder också v-på direktiv för att lyssna efter händelser, till exempel en klickhändelse på knappen. Den omvärderar v-if direktiv när värdet av visaAnvändare ändringar.

Att uppnå villkorlig återgivning med v-show-direktivet

De v-show direktiv är ett annat sätt att visa eller dölja element i Vue.js villkorligt. Det liknar v-if direktiv genom att det kan rendera element baserat på ett booleskt uttryck. Det finns dock några kritiska skillnader mellan de två direktiven.

De v-show direktivet tar inte bort elementet från DOM när uttrycket utvärderas till falskt. Istället använder den CSS för att växla elementets visa egendom mellan ingen och dess ursprungliga värde.

Detta betyder att elementet fortfarande finns i DOM men är inte synligt när uttrycket är falskt.

Här är ett exempel:

<kropp>
<divid="app">
<divv-if="showUsers">
<ul>
<li>Användare 1li>
<li>Användare 2li>
ul>
div>
<knappv-on: klicka="toggleShowUsers()">
 Växla Användare
knapp>
<h1v-show="showUsers">{{ meddelande }}h1>
div>
<manus>
 const app = Vue.createApp({
 data () {
 lämna tillbaka {
 showUsers: sant,
 meddelande: 'Dessa är användarna av Vue-appen'
 }
 },
 metoder: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
manus>
kropp>

Kodblocket ovan använder v-show direktiv för att visa ett meddelande som säger, 'Det här är användarna av Vue-appen' när du klickar på växlingsknappen.

Att välja mellan v-if och v-show

När du bestämmer dig för att använda v-if och v-show direktiv för att visa eller dölja element i Vue.js villkorligt, det finns några viktiga faktorer att ta hänsyn till.

När tillståndet sällan förändras, använder du v-if direktivet är bra. Det här är för att v-if tar bort elementet från DOM när villkoret är falskt, vilket kan hindra optimal prestanda. Elementet återges bara när villkoret blir sant och tas bort från DOM när villkoret blir falskt igen.

Å andra sidan, om tillståndet sannolikt kommer att förändras ofta, är det bättre att använda v-show direktiv, vilket förbättrar prestandan. Det här är för att v-show använder CSS för att dölja eller visa elementet genom att växla CSS-visningsegenskapen mellan none och block, vilket lämnar elementet alltid renderat till DOM.

Villkorlig rendering i din Vue-app på ett enkelt sätt

Du har lärt dig att rendera innehåll villkorligt i Vue-appar med v-if- och v-show-direktiven. Genom att använda dessa direktiv kan du snabbt rendera innehåll baserat på olika förhållanden, vilket ger dig mer kontroll över utseendet och beteendet hos dina Vue-komponenter.