Vue Academy · Lesson

Conditionals and Loops

Render conditionally with v-if and lists with v-for.

Conditionals and Loops is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. 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 Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Conditional Rendering

Vue lets you show or hide parts of the UI based on data.

v-if conditionally renders an element
v-else-if and v-else chain conditions
v-show toggles visibility

v-if

The v-if directive renders an element only when its expression is truthy.

<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>

v-else-if and v-else

Chain conditions with v-else-if and v-else. They must follow a v-if directly.

<p v-if="score >= 90">Grade: A</p>
<p v-else-if="score >= 80">Grade: B</p>
<p v-else-if="score >= 70">Grade: C</p>
<p v-else>Grade: F</p>

v-show

v-show always renders the element but toggles its CSS display property.

<div v-show="isVisible">
  This div stays in the DOM,
  only display:none toggles.
</div>

v-if vs v-show

The key difference:

v-if adds or removes the element from the DOM entirely
v-show keeps it in the DOM, just toggling display

Use v-show for things toggled often. Use v-if when the condition rarely changes or the element is expensive.

v-for over Arrays

The v-for directive renders a list by iterating an array.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

<!-- data: fruits = ["Apple", "Banana", "Cherry"] -->

v-for with Index

v-for can also give you the index of each item.

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

The Importance of :key

Always provide a unique :key when using v-for.

It helps Vue track each node identity
Enables efficient, correct DOM updates
Use a stable unique id, not the array index when items reorder

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

Why :key Matters

Without a good key, Vue may reuse the wrong elements when the list changes.

Form inputs could keep the wrong value
Animations could glitch
State could attach to the wrong row

A stable, unique key prevents these bugs.

v-for over Objects

v-for can iterate an object property values, with optional key and index.

<li v-for="(value, key) in userProfile" :key="key">
  {{ key }}: {{ value }}
</li>

<!-- userProfile = { name: "Ada", age: 36 } -->

Combining v-for and Conditions

To filter a list, prefer a computed property over putting v-if on the same element as v-for.

<!-- Filter in a computed, then loop -->
<li v-for="task in activeTasks" :key="task.id">
  {{ task.title }}
</li>

<!-- activeTasks is a computed that
     returns only unfinished tasks -->

Quick Check

Test your understanding of conditionals and loops.

Recap: Conditionals and Loops

You learned list and conditional rendering:

v-if / v-else-if / v-else conditionally render
v-show toggles display only
v-for iterates arrays and objects
Always add a unique :key
Filter lists with computed properties

Next: attribute and class bindings.

Frequently asked questions

Is the “Conditionals and Loops” lesson free?

Yes — the full text of “Conditionals and Loops” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Conditionals and Loops”?

Render conditionally with v-if and lists with v-for. You practise Vue 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 Vue Academy?

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

How long does the “Conditionals and Loops” 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 Vue Academy lesson?

Yes. Every Vue 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 Vue Academy