Role of if condition in vue.js

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

Abhishek Singh

I’m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I’ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains:

• DevOps School – Tech blogs and tutorials

• Holiday Landmark – Travel stories and guides

• Stocks Mantra – Stock market strategies and tips

• My Medic Plus – Health and fitness guidance

• TrueReviewNow – Honest product reviews

• Wizbrand – SEO and digital tools for businesses

I’m also exploring the fascinating world of Quantum Computing.