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.

v-if:

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

1<li v-for="item in items">{{ item }}</li>
2<div v-if="show">Content</div>

Note:

• v-if has higher priority.
• Avoid using together.