Vue TutorialLesson 5Free preview
Vue v-if
This lesson is part of Vue · All levels
Summary
The v-if directive works like a branch: the element is only rendered to the DOM when its expression is true. Vue provides the derivative of v-else-if and v-else which must immediately follow the value-free v-if. Unlike hiding through CSS, v-if actually adds or removes elements from the DOM so there is a cost when moving conditions.
Key points
- V-if only render elements if the expression is true.
- V-else-if provides a branch of additional conditions.
- V-else deals with the last condition and should not have a score.
- V-else-if and v-else should be in order right after v-if.
- V-if you delete and install elements in the DOM, not just hide them.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.