Vue.js Conditional Rendering


  • <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


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!