Direktiver: v-if, v-for, v-bind og v-on
Rendrer betinget med v-if og v-show, iterer med v-for, bind attributter dynamisk med v-bind, og lytt til DOM-hendelser med v-on.
Direktiver: v-if, v-for, v-bind og v-on er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva er Vue-direktiver?
Direktiver er spesielle attributter med prefikset v- som ber Vue gjøre noe med et DOM-element. De evalueres som JavaScript-uttrykk og reagerer på endringer i reaktive data.
v-if, v-else-if, v-else
v-if gjengir et element betinget, basert på et uttrykk som evalueres til en sann verdi. Elementet fjernes fullstendig fra DOM-en når uttrykket er usant. v-else angir alternativet.
<div v-if="isLoggedIn">
<UserDashboard />
</div>
<div v-else-if="isLoading">
<Spinner />
</div>
<div v-else>
<LoginForm />
</div>v-show – synlighetsbryter
v-show veksler CSS-egenskapen display: none i stedet for å legge elementet til i eller fjerne det fra DOM-en. Bruk v-show når elementet veksler ofte, og v-if når betingelsen sjelden endres.
<!-- Good for frequently toggling: -->
<div v-show="isDropdownOpen">...</div>
<!-- Good for rarely changing: -->
<div v-if="userHasPremium">...</div>v-for – gjengivelse av lister
v-for="item in items" gjengir elementet for hvert element i listen. Inkluder alltid :key for stabile oppdateringer.
<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
Iterer over verdiene i et objekt eller over nøkkel-verdi-par.
<dl>
<template v-for="(value, key) in user" :key="key">
<dt>{{ key }}</dt>
<dd>{{ value }}</dd>
</template>
</dl>v-bind – binding av attributter
v-bind:attr eller kortformen :attr binder et HTML-attributt dynamisk til en reaktiv verdi.
<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
Bind flere attributter samtidig ved hjelp av et objekt.
<input v-bind="{
type: 'email',
placeholder: 'Enter email',
disabled: isSubmitting
}">Klassebinding: :class
Bind CSS-klasser betinget med et objekt (nøkkel = klassenavn, verdi = betingelse) eller en matrise.
<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 }"Stilbinding: :style
Bind innebygde stiler med et camelCase-objekt.
<div :style="{ backgroundColor: brandColor, padding: spacing + 'px' }">v-on – lytte etter hendelser
v-on:event eller kortformen @event kobler til hendelseslyttere.
<button @click="handleClick">Click Me</button>
<input @input="value = $event.target.value">
<form @submit.prevent="handleSubmit">...</form>Hendelsesmodifikatorer
Vue har innebygde hendelsesmodifikatorer: .prevent (preventDefault), .stop (stopPropagation), .once (kjøres én gang), .self (bare når målet er selve elementet) og .passive (forbedrer rulleytelsen).
<form @submit.prevent="submit">
<button @click.stop="selectItem">
<div @click.self="closeModal">
<div @scroll.passive="onScroll">Hurtigsjekk
Når bør De bruke v-show i stedet for v-if?
Oppsummering: Vue-direktiver
v-if fjerner elementer fra og legger dem til i DOM-en. v-show veksler visningen. v-for gjengir lister (bruk alltid :key). v-bind (:) binder attributter, :class og :style. v-on (@) kobler til hendelseslyttere. Hendelsesmodifikatorer: .prevent, .stop og .once. v-model brukes til toveisbinding (kombinerer v-bind:value og v-on:input).
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Direktiver: v-if, v-for, v-bind og v-on» gratis?
Ja – hele teksten i «Direktiver: v-if, v-for, v-bind og v-on» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Direktiver: v-if, v-for, v-bind og v-on»?
Rendrer betinget med v-if og v-show, iterer med v-for, bind attributter dynamisk med v-bind, og lytt til DOM-hendelser med v-on. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Direktiver: v-if, v-for, v-bind og v-on»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Vue SFC: script, template og style
- Options API: data, methods og computed
- Direktiver: v-if, v-for, v-bind og v-on
- Komponentprops og emits