Hvordan implementere betinget gjengivelse i Vue.js

Vue.js er et populært JavaScript-rammeverk som gjør det enkelt å lage dynamiske webapplikasjoner. Vue.js kan gjengi innhold basert på data og hendelser. Dette er spesielt nyttig for å lage responsive og interaktive brukergrensesnitt.

Finn ut hva Vue-direktiver er og hvordan du bruker dem for å oppnå betinget gjengivelse i Vue.js.

Hva er Vue-direktiver?

Vue-direktiver lar deg forbedre oppførselen til HTML-elementer i Vue.js-maler ved å legge til unike attributter til dem.

Direktiver er en grunnleggende del av Vue.js og gir en enkel og kraftig måte å manipulere Document Object Model (DOM), legg til dynamisk atferd til elementer og administrer data.

I tillegg lar Vue.js deg lage tilpassede direktiver, slik at du enkelt kan lage gjenbrukbare funksjoner for Vue-apper.

Vue-rammeverket prefikser sine direktiver med "v-" foran direktivets navn. Eksempler på ofte brukte direktiver i Vue inkluderer v-på, v-bind, v-for, og v-if.

Hva er betinget gjengivelse?

Betinget gjengivelse lar deg vise eller skjule elementer basert på forholdene du angir. Du kan for eksempel bruke betinget gjengivelse for å vise en melding til brukere bare hvis de har angitt en gyldig e-postadresse.

I Vue.js kan du bruke direktiver som f.eks v-if og v-show for å oppnå betinget gjengivelse i applikasjonen din, forskjellig fra hvordan du ville gjengi innhold betinget i React.js.

Oppnå betinget gjengivelse med v-if-direktivet

Lik JavaScript hvis... annet uttalelse, den v-if direktiv i Vue.js har en betingelse. Hvis den ikke er oppfylt, evaluerer Vue.js følgende betingelse spesifisert i a v-else direktivet og fortsetter å gjøre det til det enten oppfyller en betingelse eller evaluerer alle betingelser.

Dette direktivet lar deg betinget gjengi et element basert på en boolsk verdi. Vue.js-kompilatoren vil ikke gjengi delen hvis verdien er falsk.

Her er et eksempel på gjengivelse av innhold betinget med v-if:

html>
<htmllang="no">
<hode>
<tittel>Dokumenttittel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
hode>
<kropp>
<divid="app">
<h1v-if='falsk' >{{ melding1 }}h1>
<h1v-else >{{ melding2 }}h1>
div>
<manus>
 const app = Vue.createApp({
 data () {
 komme tilbake {
 melding1: 'Dette er Vue-appen din.',
 melding2: 'Ikke ennå en Vue-app.'
 }
 }
 })
 app.mount('#app')
manus>
kropp>
html>

Kodeblokken ovenfor viser en Vue-app opprettet ved å legge til en Content Delivery Network (CDN) lenke til teksten til HTML-filen. V-if-direktivet vil gjengi h1-elementet bare hvis betingelsen er sann.

I Vue-apper er det situasjoner der du må gjengi en komponent basert på spesifikke dynamiske kriterier. Dette er nyttig i scenarier som å vise informasjon bare når en bruker klikker på en knapp eller vise en lasteindikator mens data lastes inn fra en API.

For eksempel:

html>
<htmllang="no">
<hode>
<tittel>Vue apptittel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
hode>
<kropp>
<divid="app">
<divv-if="vis brukere">
<ul>
<li>Bruker 1li>
<li>Bruker 2li>
ul>
div>
<knappv-on: klikk="toggleShowUsers()">
 Slå på brukere
knapp>
<h1>{{ beskjed }}h1>
div>
<manus>
 const app = Vue.createApp({
 data () {
 komme tilbake {
 showUsers: sant,
 melding: 'Dette er din Vue-app.'
 }
 },
 metoder: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
manus>
kropp>
html>

Kodeblokken ovenfor bruker v-if direktiv for å betinget gjengi innhold basert på verdien av en boolsk variabel, vis brukere.

De div element vises hvis verdien er ekte og skjult hvis det er falsk. Ved å klikke på Slå på brukere knappen utløser toggleShowUsers() metode for å endre verdien av vis brukere.

Dette eksemplet bruker også v-på direktiv om å lytte etter hendelser, for eksempel en klikkhendelse på knappen. Den revurderer v-if direktiv når verdien av vis brukere Endringer.

Oppnå betinget gjengivelse med v-show-direktivet

De v-show direktiv er en annen måte å vise eller skjule elementer i Vue.js betinget. Det ligner på v-if direktiv ved at det kan gjengi elementer basert på et boolsk uttrykk. Det er imidlertid noen kritiske forskjeller mellom de to direktivene.

De v-show direktivet fjerner ikke elementet fra DOM når uttrykket evalueres til usant. I stedet bruker den CSS for å veksle mellom elementets vise eiendom mellom ingen og dens opprinnelige verdi.

Dette betyr at elementet fortsatt er tilstede i DOM, men ikke er synlig når uttrykket er usant.

Her er et eksempel:

<kropp>
<divid="app">
<divv-if="vis brukere">
<ul>
<li>Bruker 1li>
<li>Bruker 2li>
ul>
div>
<knappv-on: klikk="toggleShowUsers()">
 Slå på brukere
knapp>
<h1v-show="vis brukere">{{ beskjed }}h1>
div>
<manus>
 const app = Vue.createApp({
 data () {
 komme tilbake {
 showUsers: sant,
 melding: 'Dette er brukerne av Vue-appen'
 }
 },
 metoder: {
 toggleShowUsers() {
 this.showUsers = !this.showUsers
 }
 }
 })
 app.mount('#app')
manus>
kropp>

Kodeblokken ovenfor bruker v-show direktiv for å vise en melding som sier:Dette er brukerne av Vue-appen' når som helst du klikker på veksleknappen.

Velge mellom v-if og v-show

Når du velger mellom å bruke v-if og v-show direktiver for å vise eller skjule elementer i Vue.js betinget, er det noen viktige faktorer å vurdere.

Når tilstanden sjelden endres, bruker du v-if direktivet er bra. Dette er fordi v-if fjerner elementet fra DOM når tilstanden er falsk, noe som kan hindre optimal ytelse. Elementet gjengis først når betingelsen blir sann og fjernet fra DOM når betingelsen blir usann igjen.

På den annen side, hvis tilstanden sannsynligvis vil endre seg ofte, er det bedre å bruke v-show direktiv, som forbedrer ytelsen. Dette er fordi v-show bruker CSS for å skjule eller vise elementet ved å veksle CSS-visningsegenskapen mellom ingen og blokk, slik at elementet alltid blir gjengitt til DOM.

Betinget gjengivelse i Vue-appen din på en enkel måte

Du har lært å gjengi innhold betinget i Vue-apper med v-if- og v-show-direktivene. Ved å bruke disse direktivene kan du raskt gjengi innhold basert på ulike forhold, noe som gir deg mer kontroll over utseendet og oppførselen til Vue-komponentene dine.