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

3. Conditional Rendering

Brett Nelson1 
(1)
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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.