Vue v-if
Conditionally render elements in your Vue app
❓ What is v-if?
The v-if directive conditionally renders elements based on a truthy value. When the condition is false, the element is completely removed from the DOM, not just hidden with CSS.
<!-- v-if Example -->
<div id="app">
<p v-if="showMessage">This message is visible!</p>
<button @click="showMessage = !showMessage">
Toggle Message
</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
showMessage: true
}
}
}).mount('#app')
</script>
Output:
This message is visible!
Conditional Rendering Directives
v-if
Render only if condition is true
<p v-if="show">
Visible
</p>v-else-if
Chain multiple conditions
<p v-else-if="other">
Alternative
</p>v-else
Fallback when condition is false
<p v-else>
Default
</p>DOM Removal
Elements removed completely
<!-- Not in DOM -->
<p v-if="false">
Gone
</p>🔹 Basic v-if Usage
The v-if directive evaluates an expression and renders the element only when the expression is truthy. When false, the element doesn't exist in the DOM at all.
<div id="app">
<h3>Login Status</h3>
<p v-if="isLoggedIn">Welcome back, {{ username }}!</p>
<p v-if="!isLoggedIn">Please log in to continue.</p>
<button @click="isLoggedIn = !isLoggedIn">
{{ isLoggedIn ? 'Logout' : 'Login' }}
</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
isLoggedIn: false,
username: 'John Doe'
}
}
}).mount('#app')
</script>Output:
Login Status
Please log in to continue.
🔹 v-else-if and v-else
You can chain conditions using v-else-if and provide a fallback with v-else. These directives must immediately follow a v-if or v-else-if element to work properly.
<div id="app">
<h3>Grade: {{ score }}</h3>
<p v-if="score >= 90">Excellent! Grade: A</p>
<p v-else-if="score >= 80">Great! Grade: B</p>
<p v-else-if="score >= 70">Good! Grade: C</p>
<p v-else-if="score >= 60">Pass! Grade: D</p>
<p v-else>Failed! Grade: F</p>
<button @click="score += 10">Increase Score</button>
<button @click="score -= 10">Decrease Score</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
score: 75
}
}
}).mount('#app')
</script>Output:
Grade: 75
Good! Grade: C
🔹 v-if with Multiple Elements
Use the template tag to conditionally render multiple elements together without adding an extra wrapper element to the DOM. This keeps your HTML clean and semantic.
<div id="app">
<button @click="showDetails = !showDetails">
{{ showDetails ? 'Hide' : 'Show' }} Details
</button>
<template v-if="showDetails">
<h3>User Information</h3>
<p>Name: {{ user.name }}</p>
<p>Email: {{ user.email }}</p>
<p>Role: {{ user.role }}</p>
</template>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
showDetails: false,
user: {
name: 'Alice Smith',
email: '[email protected]',
role: 'Developer'
}
}
}
}).mount('#app')
</script>Output (when shown):
🔹 Conditional Rendering with Expressions
You can use JavaScript expressions in v-if conditions. This allows for complex logic like checking array lengths, comparing values, or calling methods to determine visibility.
<div id="app">
<h3>Shopping Cart ({{ items.length }} items)</h3>
<div v-if="items.length === 0">
<p>Your cart is empty!</p>
<button @click="addItem">Add Item</button>
</div>
<div v-else>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
<p v-if="items.length >= 5">Cart is getting full!</p>
<button @click="clearCart">Clear Cart</button>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
items: []
}
},
methods: {
addItem() {
this.items.push(`Item ${this.items.length + 1}`)
},
clearCart() {
this.items = []
}
}
}).mount('#app')
</script>Output (empty cart):
Shopping Cart (0 items)
Your cart is empty!
🔹 Practical Example: User Dashboard
Here's a real-world example showing how v-if creates dynamic user interfaces. The dashboard changes based on user authentication status and subscription level, demonstrating conditional rendering in action.
<div id="app">
<div v-if="!isAuthenticated">
<h2>Welcome! Please sign in.</h2>
<button @click="login">Sign In</button>
</div>
<div v-else>
<h2>Dashboard - {{ user.name }}</h2>
<div v-if="user.isPremium">
<p>⭐ Premium Member</p>
<p>Access to all features!</p>
</div>
<div v-else>
<p>Free Account</p>
<button>Upgrade to Premium</button>
</div>
<button @click="logout">Sign Out</button>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
isAuthenticated: false,
user: {
name: 'Sarah Johnson',
isPremium: true
}
}
},
methods: {
login() { this.isAuthenticated = true },
logout() { this.isAuthenticated = false }
}
}).mount('#app')
</script>