Vue.js Conditional Rendering

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

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!



Got any Vue.js Question?