How do you conditionally show or hide elements in Vue.js?

The v-if, v-else-if, and v-else directives conditionally add or remove elements from the DOM, just like JavaScript if/else.

<div v-if="conditionA">
  Show when A is true
</div>
<div v-else-if="conditionB">
  Show when B is true (and A is false)
</div>
<div v-else>
  Show when neither A nor B is true
</div>

Works like JavaScript if/else if/else. Elements are completely added/removed from the DOM, not just hidden.

Go deeper:

• Conditional Rendering (Vue docs) — v-if/v-else-if/v-else, and how v-show differs (toggles CSS display instead of removing the element).