Conditional Content in Vuejs

In Vue.js there are two ways to handle the conditional content.

  • v-if
  • v-show

Both directives render the content if a certain condition is met. With v-if content is removed or added to the DOM by meeting a certain condition. Whereas with v-show it is just shown or hidden with CSS.

v-if can also be combined with v-else and v-else-if, but only on direct sibling elements.

Let’s take a look at an example in codepen.

Author: Danyal
I'm working as programmer since 2002. Born, grew up, studied and worked in Pakistan now Im located in Denmark since 2006.