© Brett Nelson 2018
Brett NelsonGetting to Know Vue.jshttps://doi.org/10.1007/978-1-4842-3781-6_3

3. Conditional Rendering

Brett Nelson1 
Eagan, Minnesota, USA

Sometimes your app will need to be able to determine whether or not to show something depending on user interactions. For instance, if we are creating a form that asks if users own a car and the user says no, there is no reason to show them the question that asks what color the car is.

Vue provides two directives to conditionally show content: v-if and v-show .
  • With v-show, we can hide and show content using the CSS display property.

  • With v-if, the content is removed from the DOM. It can be used with the v-else and v-else-if directives.

From a performance perspective, v-show has a higher initial ...

Get Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.