IF Condition:-

Structure followed by vue.js for ui element rendering. v-if supports the control branching if..else .

Conditions and Loops are used in all programming languages to provide repetitive control structures.

v-if Example

index.html file

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

index.js file

<script>
var app = new vue({
el: "#app_div",
data: {
show_type: 'birds'
}
});
</script>

it renders the “fruits” and “birds” span when i typed “fruits” and “birds” in the input text, respectively. otherwise, it renders the “animal” span.

Output:-