Stats

1841 Contributors: 4 Saturday, February 18, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial: riptutorial@gmail.com
Roadmap: roadmap

Conditional Rendering

Syntax

  • <element v-if="condition"></element> //v-if
  • <element v-if="condition"></element><element v-else="condition"></element> //v-if | v-else
  • <template v-if="condition">...</template> //templated v-if
  • <element v-show="condition"></element> //v-show

Remarks

It is very important to remember the difference between v-if and v-show. While their uses are almost identical, an element bound to v-if will only render into the DOM when it's condition is true for the first time. When using the v-show directive, all elements are rendered into the DOM but are hidden using the display style if the condition is false!

Related Examples