Category : VueJs
VueJs Series with Nirmal : Difference between v-if and v-show
May 25, 2018
No comments
Article
Welcome to the VueJs series with Nirmal.
v-if
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.
v-show
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.
v-if vs v-show
- Unlike v-if, v-show has no else part
- v-if only renders the elements which satisfies the condition. But v-show, renders all elements and manages with css “display” attribute.
Video
The video contains the demonstration of v-if vs v-show
Hope this helps.
Categories: VueJs
Vue.JS – An introduction
What is Vue.Js
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.
Any pre-requisite knowledge to learn it ?
HTML, CSS and Javascript should be the basic one to know to start with it.
A quick introduction to kick start
Hope this helps.
Please do comment.
Categories: VueJs