Frontend Academy · Lesson

Directives: v-if v-for v-bind v-on

Conditionally render with v-if and v-show, loop with v-for, bind attributes dynamically with v-bind, and listen to DOM events with v-on.

Directives: v-if v-for v-bind v-on is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Are Vue Directives?

Directives are special attributes prefixed with v- that tell Vue to do something to a DOM element. They're evaluated as JavaScript expressions and react to reactive data changes.

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

v-if conditionally renders an element based on a truthy expression. The element is completely removed from the DOM when false. v-else provides the fallback.

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

v-show — Visibility Toggle

v-show toggles CSS display: none instead of adding/removing from the DOM. Use v-show when the element toggles frequently; use v-if when the condition rarely changes.

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

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

v-for — Rendering Lists

v-for="item in items" renders the element for each item. Always include :key for stable updates.

<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 with Object

Iterate over an object's values, or key-value pairs.

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

v-bind — Binding Attributes

v-bind:attr or the shorthand :attr dynamically binds an HTML attribute to a reactive value.

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

v-bind Object Syntax

Bind multiple attributes at once using an object.

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

Class Binding: :class

Bind CSS classes conditionally with an object (key = class name, value = condition) or an 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 }"

Style Binding: :style

Bind inline styles with a camelCase object.

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

v-on — Listening to Events

v-on:event or the shorthand @event attaches event listeners.

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

Event Modifiers

Vue provides built-in event modifiers: .prevent (preventDefault), .stop (stopPropagation), .once (fires once), .self (only if target is element itself), .passive (improves scroll performance).

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

Quick Check

When should you use v-show instead of v-if?

Recap: Vue Directives

v-if removes/adds from DOM. v-show toggles display. v-for renders lists (always :key). v-bind (:) binds attributes, :class, :style. v-on (@) attaches event listeners. Event modifiers .prevent, .stop, .once. v-model for two-way binding (combines v-bind:value and v-on:input).

Frequently asked questions

Is the “Directives: v-if v-for v-bind v-on” lesson free?

Yes — the full text of “Directives: v-if v-for v-bind v-on” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Directives: v-if v-for v-bind v-on”?

Conditionally render with v-if and v-show, loop with v-for, bind attributes dynamically with v-bind, and listen to DOM events with v-on. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Directives: v-if v-for v-bind v-on” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy