Conditional and List Rendering

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Choose between v-if and v-show
Add a stable key to v-for

Let's break it down simply

v-if removes an element from the DOM entirely when the condition is false. v-show only toggles CSS display, which makes it a better fit for UI that's toggled frequently. Always give every v-for list a unique :key.

vue

<script setup>
const tasks = [
  { id: 1, title: 'Read Vue guide', done: true },
  { id: 2, title: 'Build a component', done: false }
]
</script>

<template>
  <p v-if="tasks.length === 0">No tasks</p>
  <ul v-else>
    <li v-for="task in tasks" :key="task.id">
      {{ task.done ? '✓' : '○' }} {{ task.title }}
    </li>
  </ul>
</template>

You should see

✓ Read Vue guide
○ Build a component

Try it yourself

Show only the products from the list with stock > 0, using each item's unique id as the key.

List Rendering — Vue.js

Easy traps

Using the list index as the key
Using v-if and v-for together on the same element

Exercise

Show only the products from the list with stock > 0, using each item's unique id as the key.

You'll know it worked when: ✓ Read Vue guide ○ Build a component