Vue.js: What is the difference between v-for and v-if?

v-for — renders elements by iterating over an array or object. v-if — conditionally renders elements based on a boolean expression.

v-for:

• Loops over arrays, objects, or ranges.
• Renders multiple elements.
• Requires :key for efficient rendering.
• Can use index for iteration.

v-if:

• Conditionally renders element.
• Can use v-else-if and v-else.
• Element removed from DOM when false.
• Boolean condition required.

1<template>
2  <!-- v-for: iterate over array -->
3  <ul>
4    <li v-for="item in items" :key="item.id">
5      {{ item.name }}
6    </li>
7  </ul>
8
9  <!-- v-if: conditional -->
10  <div v-if="isLoggedIn">Welcome back!</div>
11  <div v-else>Please log in.</div>
12</template>

Important:

• v-if has higher priority than v-for.
• Avoid using both on the same element.
• Use computed property to filter before v-for.