16 Conditional Rendering with v-if

https://codepen.io/steve-ngai-chee-weng/pen/poyRbGY

v-show - Another option for conditionally displaying an element is the v-show directive. The usage is largely the same:

The difference is that an element with v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element.

Note that v-show doesn’t support the "template" element, nor does it work with v-else.

v-if vs v-show - v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.

v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time.

In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling.

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

Reference - https://vuejs.org/v2/guide/conditional.html

Playlist - https://www.youtube.com/watch?v=68b4Q4ZLUTk&list=PLIh_aKrRpW7SNdT5LZhEakJrQILfTpUOO

01 Hello World Vue.Js with Introduction (Start) - https://youtu.be/68b4Q4ZLUTk
02 v-on and methods - textbox onkeyup input event (Teaser) - https://youtu.be/dW6V-y2il0o
03 Run Vue locally - https://youtu.be/_iM8tT0ihow
04 Call method return string - https://youtu.be/bD6-NyOzC2o
05 Vue instance method access to data property - https://youtu.be/_UCYfLOcjBc
06 Binding to attributes using v-bind. Mustache syntax or interpolation is only for string - https://youtu.be/X10MH_jKVyU
07 Listerning to Click event - https://youtu.be/xGwOOq-PaO0
08 Getting Event Data from Event Object - https://youtu.be/-ZW7MxgeGmo
09 Passing own Event Arguments - https://youtu.be/0vKX2iQeXcA
10 Stop propogation in Vue - https://youtu.be/Der44lEGxdk
11 Modifying an Event with Event Modifiers - https://youtu.be/2vUB_GhDx80
12 Two way binding - https://youtu.be/95Fj6Zv4zqM
13 Vue @Shortform - https://youtu.be/6eOIkd1gwts
14 Dynamic Styling with CSS Classes and Computed Properties - https://youtu.be/T6nk3JPWuGQ
15 Setting Styles Dynamically Without CSS Classes - https://youtu.be/8ymZMovBE0E
16 Conditional Rendering with v-if - https://youtu.be/ldaogfJp73s
17 Rendering Lists with v-for - https://youtu.be/Jj9h8d7lONc
18 Push element into array and complex type - https://youtu.be/JyTbkvpA0s0
19 Combine v-for and v-if and v-else (Temporary End) - https://youtu.be/gQKLZfNJBZM
Exercise 1 - Pass and Fail Students - https://youtu.be/QONTk9rbC3w
Exercise 2 - Mock Shopping Cart - https://youtu.be/_Pja6kdyvpc