Vue.js Conditional Rendering
Conditional rendering is a fundamental concept in Vue.js that allows developers to control the rendering of elements based on specific conditions. This feature enables the creation of dynamic and interactive user interfaces by displaying or hiding elements based on data properties, user interactions, or other conditions.In this chapter, we will explore Vue.js conditional rendering in detail, from basic concepts to advanced use cases. We will cover various directives and techniques for implementing conditional rendering, provide numerous examples, and explain the output of each example.
What is Vue.js Conditional Rendering?
Conditional rendering in Vue.js refers to the ability to show or hide elements based on specific conditions. This is achieved using Vue directives such as v-if, v-else-if, v-else, and v-show. These directives help create more dynamic and responsive user interfaces by altering the DOM based on reactive data.
Using v-if for Conditional Rendering
The v-if directive is used to conditionally render an element or component. If the expression inside v-if evaluates to true, the element is rendered; otherwise, it is not.
Basic Usage
<div id="app">
<button @click="isVisible = !isVisible">Toggle Message</button>
<p v-if="isVisible">Hello, Vue.js!</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data(){return{isVisible:!0}}})</script>
Explanation:
- A button toggles the
isVisibledata property betweentrueandfalse. - The
<p>element is conditionally rendered based on the value ofisVisible. - When
isVisibleistrue, the message “Hello, Vue.js!” is displayed; whenfalse, it is hidden.
v-else and v-else-if
The v-else directive renders an element when the preceding v-if or v-else-if condition evaluates to false. The v-else-if directive checks another condition if the previous v-if is false.
<div id="app">
<button @click="toggleStatus">Toggle Status</button>
<p v-if="status === 'active'">Status: Active</p>
<p v-else-if="status === 'inactive'">Status: Inactive</p>
<p v-else>Status: Unknown</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data(){return{status:'active'}},methods:{toggleStatus(){this.status=this.status==='active'?'inactive':'active'}}})</script>
Explanation:
- A button toggles the
statusdata property between ‘active’ and ‘inactive’. - The first
<p>element is rendered ifstatusis ‘active’. - The second
<p>element is rendered ifstatusis ‘inactive’. - The third
<p>element is rendered if neither condition is met (status is ‘unknown’).
Template Element for Multiple Conditions
The <template> element can be used to group multiple elements that are conditionally rendered together.
<div id="app">
<button @click="toggleVisibility">Toggle Sections</button>
<template v-if="isVisible">
<h1>Section 1</h1>
<p>This is section 1.</p>
<h1>Section 2</h1>
<p>This is section 2.</p>
</template>
<template v-else>
<h1>Section 3</h1>
<p>This is section 3.</p>
</template>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data(){return{isVisible:!0}},methods:{toggleVisibility(){this.isVisible=!this.isVisible}}})</script>
Explanation:
- A button toggles the
isVisibledata property. - The elements within the
<template>withv-ifare rendered whenisVisibleistrue. - The elements within the
<template>withv-elseare rendered whenisVisibleisfalse.
Using v-show for Conditional Rendering
The v-show directive also conditionally renders an element but in a different way than v-if. While v-if adds or removes the element from the DOM, v-show toggles the display CSS property of the element.
Differences Between v-if and v-show
v-ifactually removes or inserts the element into the DOM based on the condition. It is more performance-intensive when toggling frequently.v-showonly toggles thedisplayproperty, making it faster for frequent toggling but always keeps the element in the DOM.
<div id="app">
<button @click="isVisible = !isVisible">Toggle Message</button>
<p v-show="isVisible">Hello, Vue.js!</p>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data(){return{isVisible:!0}}})</script>
Explanation:
- The button toggles the
isVisibledata property. - The
<p>element’sdisplayproperty is toggled based on the value ofisVisible. - When
isVisibleistrue, the message “Hello, Vue.js!” is displayed; whenfalse, it is hidden but still present in the DOM.
Conditional Rendering with v-for
Sometimes you need to render elements conditionally within a list. You can combine v-for with v-if or v-show for this purpose.
<div id="app">
<ul>
<li v-for="item in items" :key="item.id" v-if="item.isVisible">{{ item.name }}</li>
</ul>
</div> <script type="litespeed/javascript">new Vue({el:'#app',data(){return{items:[{id:1,name:'Item 1',isVisible:!0},{id:2,name:'Item 2',isVisible:!1},{id:3,name:'Item 3',isVisible:!0}]}}})</script>
Explanation:
- The
v-fordirective iterates over theitemsarray. - The
v-ifdirective conditionally renders each<li>element based on theisVisibleproperty of each item. - Only items with
isVisibleset totrueare displayed.
Best Practices for Conditional Rendering
- Use
v-iffor Performance: Usev-iffor conditions that change infrequently or involve heavy DOM elements, as it completely removes and inserts elements. - Use
v-showfor Frequent Toggles: Usev-showfor conditions that change frequently, as it only toggles thedisplayproperty. - Avoid Complex Conditions: Keep conditions simple and readable. Complex conditions can be extracted into computed properties or methods for clarity.
- Combine with Templates: Use
<template>to group elements that should be conditionally rendered together for better structure and readability. - Ensure Unique Keys: When using
v-forwith conditional rendering, ensure each element has a uniquekeyto help Vue efficiently update the DOM.
Conditional rendering is a powerful feature in Vue.js that allows developers to create dynamic and interactive user interfaces by controlling the rendering of elements based on various conditions. By understanding and effectively utilizing directives such as v-if, v-else-if, v-else, and v-show, you can build responsive and efficient applications. Whether you are rendering elements based on data properties, user interactions, or other conditions, Vue.js provides the tools you need to implement conditional rendering in a straightforward and intuitive manner. This chapter has covered the complete range of techniques and best practices for conditional rendering, providing a comprehensive guide for building dynamic Vue.js applications.Happy coding !❤️