Category : VueJs
Category : VueJs
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
A progressive javascript framework for building the UI. It is built on top of Javascript. Mainly focuses on the View layer for interactive UI designs.
HTML, CSS and Javascript should be the basic one to know to start with it.
Hope this helps.
Please do comment.
Categories: VueJs