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

v-for — iteration. v-if — condition.

v-for:

• Loops over array/object.
• Renders multiple elements.
• Requires key prop.

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

v-if:

• Conditional rendering.
• Renders one element.
• Boolean condition.

1<div v-if="isVisible">Content</div>

Note:

• v-if has higher priority than v-for.
• Use computed property for filtering.
• Avoid using both on same element.