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.


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

<span v-if="show_type=='Fruits'">Fruits</span>

<span v-else-if="show_type=='Birds'">Birds</span>

<span v-else>Animals</span>

</div>

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.


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

</div>

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