O'Reilly logo

Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch by Brett Nelson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

© 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required