Directives: v-if v-for v-bind v-on
Conditionally render with v-if and v-show, loop with v-for, bind attributes dynamically with v-bind, and listen to DOM events with v-on.
What Are Vue Directives?
Directives are special attributes prefixed with v- that tell Vue to do something to a DOM element. They're evaluated as JavaScript expressions and react to reactive data changes.
v-if, v-else-if, v-else
v-if conditionally renders an element based on a truthy expression. The element is completely removed from the DOM when false. v-else provides the fallback.
<div v-if="isLoggedIn">
<UserDashboard />
</div>
<div v-else-if="isLoading">
<Spinner />
</div>
<div v-else>
<LoginForm />
</div>All lessons in this course
- Vue SFC: script template style
- Options API: data methods computed
- Directives: v-if v-for v-bind v-on
- Component Props and Emits