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

v-for — renders elements by iterating. v-if — conditionally renders elements.

v-for:

• Loops over arrays, objects, or ranges.
• Requires :key for efficient rendering.

v-if:

• Conditionally renders element.
• Can use v-else-if and v-else.

1<li v-for="item in items" :key="item.id">{{ item.name }}</li>
2<div v-if="isVisible">Content</div>

Note:

• v-if has higher priority than v-for.
• Avoid using both on the same element.