Tag : v-if-vs-v-show
Tag : v-if-vs-v-show
The control structure followed by VueJs for the UI element rendering. v-if supports the control branching if..else if..else
.
A quick example to render spans based on the value typed in the input.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="app_div"> <input type="text" v-model="show_type"/> <span v-if="show_type=='Fruits'">Fruits</span> <span v-else-if="show_type=='Birds'">Birds</span> <span v-else>Animals</span> </div> <script> var app = new Vue({ el: "#app_div", data: { show_type: 'Birds' } }); </script> |
It renders the “Fruits” and “Birds” span when typed “Fruits” and “Birds” in the input text respectively. Otherwise it renders “Animal” span.
A boolean control to manage display of an UI element.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="app_div"> <span v-show="show_sky">Sky</span> </div> <script> var app = new Vue({ el: "#app_div", data: { show_sky: false } }); </script> |
As the “show_sky” variable used in this example, depending on that it either displays the span or hides it.
The video contains the demonstration of v-if vs v-show
Hope this helps.
Categories: VueJs