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

v-if — conditional rendering. v-show — CSS toggle.

v-if:

• Adds/removes DOM.
• Lazy rendering.
• Expensive toggle.

v-show:

• CSS display.
• Always rendered.
• Cheap toggle.

1<template>
2  <!-- v-if -->
3  <div v-if="show">Content</div>
4
5  <!-- v-show -->
6  <div v-show="show">Content</div>
7</template>

Key: v-if for conditionals, v-show for frequent toggles.