Betinget gengivelse er en afgørende del af skabeloner på ethvert sprog. Oplev Vue.js-tilgangen.

Vue.js er en populær JavaScript-ramme, der gør det nemt at skabe dynamiske webapplikationer. Vue.js kan gengive indhold baseret på data og hændelser. Dette er især nyttigt til at skabe responsive og interaktive brugergrænseflader.

Lær, hvad Vue-direktiver er, og hvordan du bruger dem til at opnå betinget gengivelse i Vue.js.

Hvad er Vue-direktiver?

Vue-direktiver giver dig mulighed for at forbedre adfærden af ​​HTML-elementer i Vue.js-skabeloner ved at tilføje unikke attributter til dem.

Direktiver er en grundlæggende del af Vue.js og giver en enkel og effektiv måde at manipulere Document Object Model (DOM), tilføje dynamisk adfærd til elementer og administrere data.

Derudover giver Vue.js dig mulighed for at oprette brugerdefinerede direktiver, så du nemt kan oprette genbrugelige funktioner til Vue-apps.

Vue-rammen præfikser sine direktiver med "v-" før direktivets navn. Eksempler på almindeligt anvendte direktiver i Vue omfatter v-på, v-bind, v-for, og v-if.

instagram viewer

Hvad er betinget gengivelse?

Betinget gengivelse giver dig mulighed for at vise eller skjule elementer baseret på betingelser, du angiver. For eksempel kan du bruge betinget gengivelse til kun at vise en besked til brugere, hvis de har indtastet en gyldig e-mailadresse.

I Vue.js kan du bruge direktiver som f.eks v-if og v-show for at opnå betinget gengivelse i din applikation, forskellig fra hvordan du ville gengiv indhold betinget i React.js.

Opnåelse af betinget gengivelse med v-if-direktivet

Svarende til JavaScript hvis ellers udmelding, det v-if direktiv i Vue.js har en betingelse. Hvis den ikke er opfyldt, evaluerer Vue.js følgende betingelse angivet i a v-else direktivet og fortsætter med at gøre det, indtil det enten opfylder en betingelse eller evaluerer alle betingelser.

Dette direktiv giver dig mulighed for betinget at gengive et element baseret på en boolesk værdi. Vue.js-kompileren gengiver ikke delen, hvis dens værdi er falsk.

Her er et eksempel på gengivelse af indhold betinget med v-if:

html>
<htmllang="da">
<hoved>
<titel>Dokumenttitel>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<divid="app">
<h1v-if='falsk' >{{ besked1 }}h1>
<h1v-else >{{ besked2 }}h1>
div>
<manuskript>
 const app = Vue.createApp({
 data () {
 Vend tilbage {
 besked1: 'Dette er din Vue-app.',
 besked 2: 'Ikke endnu en Vue-app.'
 }
 }
 })
 app.mount('#app')
manuskript>
legeme>
html>

Kodeblokken ovenfor viser en Vue-app oprettet ved at tilføje en Content Delivery Network (CDN) link til din HTML-fils krop. V-if-direktivet vil kun gengive h1-elementet, hvis dets betingelse er sand.

I Vue-apps er der situationer, hvor du skal gengive en komponent baseret på specifikke dynamiske kriterier. Dette er nyttigt i scenarier som f.eks. kun at vise information, når en bruger klikker på en knap eller vise en indlæsningsindikator, mens data indlæses fra en API.

For eksempel:

html>
<htmllang="da">
<hoved>
<titel>Vue apptitel>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<divid="app">
<divv-if="vis brugere">
<ul>
<li>Bruger 1li>
<li>Bruger 2li>
ul>
div>
<knapv-on: klik="toggleShowUsers()">
 Skift brugere
knap>
<h1>{{ besked }}h1>
div>
<manuskript>
 const app = Vue.createApp({
 data () {
 Vend tilbage {
 showUsers: sandt,
 besked: 'Dette er din Vue-app.'
 }
 },
 metoder: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
manuskript>
legeme>
html>

Ovenstående kodeblok bruger v-if direktiv om betinget gengivelse af indhold baseret på værdien af ​​en boolsk variabel, vis Brugere.

Det div element vises, hvis værdien er rigtigt og skjult hvis det er falsk. Ved at klikke på Skift brugere knappen udløser toggleShowUsers() metode til at ændre værdien af vis Brugere.

Dette eksempel bruger også v-på direktiv om at lytte efter begivenheder, såsom en klikhændelse på knappen. Den revurderer v-if direktiv, når værdien af vis Brugere ændringer.

Opnå betinget gengivelse med v-show-direktivet

Det v-show direktiv er en anden måde at vise eller skjule elementer i Vue.js betinget. Det ligner v-if direktiv, idet det kan gengive elementer baseret på et boolesk udtryk. Der er dog nogle kritiske forskelle mellem de to direktiver.

Det v-show direktiv fjerner ikke elementet fra DOM, når udtrykket evalueres til falsk. I stedet bruger den CSS til at skifte mellem elementets Skærm ejendom mellem ingen og dens oprindelige værdi.

Dette betyder, at elementet stadig er til stede i DOM, men ikke er synligt, når udtrykket er falsk.

Her er et eksempel:

<legeme>
<divid="app">
<divv-if="vis brugere">
<ul>
<li>Bruger 1li>
<li>Bruger 2li>
ul>
div>
<knapv-on: klik="toggleShowUsers()">
 Skift brugere
knap>
<h1v-show="vis brugere">{{ besked }}h1>
div>
<manuskript>
 const app = Vue.createApp({
 data () {
 Vend tilbage {
 showUsers: sandt,
 besked: 'Dette er brugerne af Vue-appen'
 }
 },
 metoder: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
manuskript>
legeme>

Kodeblokken ovenfor bruger v-show direktiv om at vise en meddelelse, der siger, 'Dette er brugerne af Vue-appen' når som helst du klikker på til/fra-knappen.

Vælg mellem v-if og v-show

Når du skal vælge mellem at bruge v-if og v-show direktiver for at vise eller skjule elementer i Vue.js betinget, er der nogle vigtige faktorer at overveje.

Når tilstanden sjældent ændrer sig, ved hjælp af v-if direktivet er godt. Dette er fordi v-if fjerner elementet fra DOM, når betingelsen er falsk, hvilket kan hindre optimal ydeevne. Elementet gengives først, når betingelsen bliver sand, og fjernes fra DOM, når betingelsen bliver falsk igen.

På den anden side, hvis tilstanden sandsynligvis ændrer sig ofte, er det bedre at bruge v-show direktiv, som forbedrer ydeevnen. Dette er fordi v-show bruger CSS til at skjule eller vise elementet ved at skifte CSS-visningsegenskaben mellem ingen og blok, hvilket efterlader elementet altid gengivet til DOM.

Betinget gengivelse i din Vue-app gjort let

Du har lært at gengive indhold betinget i Vue-apps med v-if- og v-show-direktiverne. Ved at bruge disse direktiver kan du hurtigt gengive indhold baseret på forskellige forhold, hvilket giver dig mere kontrol over udseendet og adfærden af ​​dine Vue-komponenter.