Frontend Academy · Lektion

Direktiver: v-if v-for v-bind v-on

Render betinget med v-if og v-show, gentag med v-for, bind attributter dynamisk med v-bind, og lyt til DOM-events med v-on.

Lektion 3 af 413 trin

Direktiver: v-if v-for v-bind v-on er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er Vue-direktiver?

Direktiver er særlige attributter med præfikset v-, som fortæller Vue, at der skal udføres noget på et DOM-element. De evalueres som JavaScript-udtryk og reagerer på ændringer i reaktive data.

v-if, v-else-if, v-else

v-if gengiver betinget et element ud fra et udtryk, der evalueres til sandt eller falsk. Elementet fjernes helt fra DOM'en, når udtrykket er falsk. v-else angiver alternativet.

<div v-if="isLoggedIn">
  <UserDashboard />
</div>
<div v-else-if="isLoading">
  <Spinner />
</div>
<div v-else>
  <LoginForm />
</div>

v-show — Synlighedsskift

v-show skifter CSS-egenskaben display: none i stedet for at tilføje elementet til eller fjerne det fra DOM'en. Brug v-show, når elementet skifter ofte, og v-if, når betingelsen sjældent ændres.

<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>

<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>

v-for — Gengivelse af lister

v-for="item in items" gengiver elementet for hvert element i listen. Medtag altid :key for at sikre stabile opdateringer.

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }} — {{ user.email }}
  </li>
</ul>

<!-- With index: -->
<li v-for="(item, index) in items" :key="item.id">
  {{ index + 1 }}. {{ item.title }}
</li>

v-for med objekter

Iterér over værdierne i et objekt eller over nøgle-værdi-par.

<dl>
  <template v-for="(value, key) in user" :key="key">
    <dt>{{ key }}</dt>
    <dd>{{ value }}</dd>
  </template>
</dl>

v-bind — Attributtilknytning

v-bind:attr eller den korte form :attr knytter dynamisk en HTML-attribut til en reaktiv værdi.

<img :src="user.avatar" :alt="user.name">
<a :href="getLink(post.id)">{{ post.title }}</a>
<button :disabled="isLoading" :class="{ active: isActive }">Save</button>

Objektsyntaks for v-bind

Knyt flere attributter til på én gang ved hjælp af et objekt.

<input v-bind="{
  type: 'email',
  placeholder: 'Enter email',
  disabled: isSubmitting
}">

Klassetilknytning: :class

Knyt CSS-klasser betinget til med et objekt (nøgle = klassenavn, værdi = betingelse) eller et array.

<div :class="{ 'is-active': isActive, 'has-error': hasError }">...</div>

<!-- Array syntax: -->
<div :class="[baseClass, isActive ? 'active' : '']">

<!-- Dynamic in script setup: -->
:class="{ card: true, [variantClass]: true }"

Stiltilknytning: :style

Knyt indlejrede stilarter til med et camelCase-objekt.

<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">

v-on — Lytte efter hændelser

v-on:event eller den korte form @event tilknytter hændelseslyttere.

<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>

Hændelsesmodifikatorer

Vue har indbyggede hændelsesmodifikatorer: .prevent (preventDefault), .stop (stopPropagation), .once (udløses én gang), .self (kun hvis målet er selve elementet) og .passive (forbedrer ydeevnen ved rulning).

<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">

Hurtigt tjek

Hvornår bør du bruge v-show i stedet for v-if?

Besvar den i den interaktive lektion

Opsummering: Vue-direktiver

v-if fjerner elementer fra DOM'en og tilføjer dem igen. v-show skifter visningen. v-for gengiver lister (medtag altid :key). v-bind (:) knytter attributter, :class og :style til. v-on (@) tilknytter hændelseslyttere. Hændelsesmodifikatorerne .prevent, .stop og .once. v-model til tovejsbinding (kombinerer v-bind:value og v-on:input).

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Direktiver: v-if v-for v-bind v-on” gratis?

Ja — hele teksten til “Direktiver: v-if v-for v-bind v-on” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Direktiver: v-if v-for v-bind v-on”?

Render betinget med v-if og v-show, gentag med v-for, bind attributter dynamisk med v-bind, og lyt til DOM-events med v-on. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Direktiver: v-if v-for v-bind v-on”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy