Vue.js 3.0 Tutorial
Vue.js 3.0 Component Advanced
Vue.js 3.0 Transitions & Animations
Vue.js 3.0 Reusable & Combinable
Vue.js 3.0 Advanced
Vue.js 3.0 Tools
Vue.js 3.0 Scale
Vue.js 3.0 Accessibility
Vue.js 3.0 Migrating from Vue2
Vue.js 3.0 Contribute Documentation
Vue.js 3.0 API References
Vue.js 3.0 Style Guide
Conditional rendering in Vue 3 is similar to Vue 2, and it's achieved by using special directives like v-if, v-else, v-else-if and v-show. Let's take a look at each.
v-if / v-else / v-else-if:These directives can be used to conditionally render elements. v-if is used to specify the condition, v-else-if for additional conditions and v-else for the default case when no condition is met.
<div id="app">
<p v-if="isVisible">This will be visible if 'isVisible' is truthy</p>
<p v-else-if="isAlsoVisible">This will be visible if 'isVisible' is falsy and 'isAlsoVisible' is truthy</p>
<p v-else>This will be visible if both 'isVisible' and 'isAlsoVisible' are falsy</p>
</div>
In your Vue instance:
const app = Vue.createApp({
data() {
return {
isVisible: true,
isAlsoVisible: false
}
}
}).mount('#app');
v-show:This directive can be used for toggling visibility of elements. Unlike v-if, v-show does not remove the elements from the DOM, it simply uses CSS to toggle their visibility.
<div id="app">
<p v-show="isVisible">This will be visible if 'isVisible' is truthy, but hidden with CSS if 'isVisible' is falsy</p>
</div>
In your Vue instance:
const app = Vue.createApp({
data() {
return {
isVisible: true
}
}
}).mount('#app');
The v-if directive is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
On the other hand, v-show is much simpler - the element is always rendered regardless of initial condition, with just simple CSS-based toggling.
Generally, if the condition is unlikely to change at runtime, use v-if. If the condition changes often, v-show is usually a lighter and more efficient option.
Using v-if and v-else in Vue 3.0:
v-if and v-else are used for conditional rendering. If the condition in v-if is true, the element is rendered; otherwise, the element specified in v-else is rendered.
Example code:
<!-- ConditionalRendering.vue -->
<template>
<div>
<p v-if="isTrue">This is true</p>
<p v-else>This is false</p>
</div>
</template>
<script>
export default {
data() {
return {
isTrue: true,
};
},
};
</script>
Vue 3.0 v-show Directive for Conditional Rendering:
v-show toggles the visibility of an element based on a condition. It uses CSS styles to hide/show the element, allowing it to remain in the DOM.
Example code:
<!-- ToggleComponent.vue -->
<template>
<div v-show="isVisible">This is shown or hidden</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
};
},
};
</script>
Vue 3.0 v-if vs v-show Comparison:
Use v-if when you want to conditionally render or skip an element entirely. Use v-show when you want to toggle visibility without affecting the DOM structure.
Example code:
<!-- IfShowComparison.vue -->
<template>
<div>
<p v-if="isTrue">Rendered using v-if</p>
<p v-show="isTrue">Rendered using v-show</p>
</div>
</template>
<script>
export default {
data() {
return {
isTrue: true,
};
},
};
</script>
Dynamic Conditional Rendering in Vue 3.0:
Use data properties or computed properties to dynamically control conditional rendering.
Example code:
<!-- DynamicRendering.vue -->
<template>
<div>
<p v-if="shouldRender">Dynamic rendering</p>
</div>
</template>
<script>
export default {
data() {
return {
shouldRender: true,
};
},
};
</script>
Vue 3.0 v-if with v-for for Conditional Rendering:
You can use v-if along with v-for to conditionally render elements within a loop.
Example code:
<!-- IfForRendering.vue -->
<template>
<ul>
<li v-for="item in items" v-if="item.isVisible">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Item 1', isVisible: true },
{ name: 'Item 2', isVisible: false },
{ name: 'Item 3', isVisible: true },
],
};
},
};
</script>
Vue 3.0 Handling Boolean Values in Conditional Rendering:
Vue automatically renders elements if the value is truthy. No need to explicitly use v-if.
Example code:
<!-- BooleanRendering.vue -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'This is a truthy value',
};
},
};
</script>
Vue 3.0 Ternary Expressions for Conditional Rendering:
Ternary expressions are a concise way to conditionally render content.
Example code:
<!-- TernaryRendering.vue -->
<template>
<div>
<p>{{ isTrue ? 'This is true' : 'This is false' }}</p>
</div>
</template>
<script>
export default {
data() {
return {
isTrue: true,
};
},
};
</script>
Vue 3.0 v-if with Computed Properties for Conditional Rendering:
Use computed properties for more complex conditions in conditional rendering.
Example code:
<!-- ComputedRendering.vue -->
<template>
<div>
<p v-if="shouldRender">Rendered using computed property</p>
</div>
</template>
<script>
export default {
computed: {
shouldRender() {
// Complex logic here
return true;
},
},
};
</script>
Vue 3.0 Rendering Components Conditionally:
Components can be conditionally rendered using v-if.
Example code:
<!-- ConditionalComponent.vue -->
<template>
<div>
<component-a v-if="isComponentA"></component-a>
<component-b v-else></component-b>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
data() {
return {
isComponentA: true,
};
},
components: {
ComponentA,
ComponentB,
},
};
</script>
Conditional Rendering with v-once in Vue 3.0:
Use v-once to render an element only once, even if the data changes.
Example code:
<!-- OnceRendering.vue -->
<template>
<div v-once>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Rendered only once',
};
},
};
</script>
Vue 3.0 Conditional Rendering Based on Data Properties:
Data properties can drive conditional rendering based on their values.
Example code:
<!-- DataBasedRendering.vue -->
<template>
<div>
<p v-if="showParagraph">This paragraph is rendered conditionally</p>
</div>
</template>
<script>
export default {
data() {
return {
showParagraph: true,
};
},
};
</script>
Vue 3.0 Handling Null and Undefined in Conditional Rendering:
Vue treats null and undefined as falsy, so you can use them for conditional rendering.
Example code:
<!-- NullUndefinedRendering.vue -->
<template>
<div>
<p v-if="message">{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: null, // or undefined
};
},
};
</script>
Dynamic Classes and Styles for Conditional Rendering in Vue 3.0:
Use dynamic classes and styles to conditionally apply CSS styles based on data properties.
Example code:
<!-- DynamicStyles.vue -->
<template>
<div :class="{ 'is-active': isActive, 'has-error': hasError }">
Dynamic styles
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false,
};
},
};
</script>