Conditionals and Loops
Render conditionally with v-if and lists with v-for.
Conditional Rendering
Vue lets you show or hide parts of the UI based on data.
- v-if conditionally renders an element
- v-else-if and v-else chain conditions
- v-show toggles visibility
v-if
The v-if directive renders an element only when its expression is truthy.
<p v-if="isLoggedIn">Welcome back!</p>
<p v-if="cart.length === 0">Your cart is empty.</p>All lessons in this course
- Interpolation and Directives
- Conditionals and Loops
- Attribute and Class Bindings