Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Component Composition
Component Body
Component Facets
Best Practices for Conditional Markup
Component Versioning
Using Expressions
Using Labels
Localization
Providing Component Documentation
Working with UI Components
Supporting Accessibility
Using Components
Communicating with Events
Creating Apps
Debugging
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Best Practices for Conditional Markup

Use the <aura:if> tag to conditionally display markup. Alternatively, you can conditionally set markup in JavaScript logic. Consider the performance cost as well as code maintainability when you design components. The best design choice depends on your use case.

Consider Alternatives to Conditional Markup

Here are some use cases where you should consider alternatives to <aura:if>.

You want to toggle visibility
Don’t use <aura:if> to toggle markup visibility. Use CSS instead. See Dynamically Showing or Hiding Markup.
You need to nest conditional logic or use conditional logic in an iteration
Using <aura:if> can hurt performance by creating a large number of components. Excessive use of conditional logic in markup can also lead to cluttered markup that is harder to maintain.
Consider alternatives, such as using JavaScript logic in an init event handler instead. See Invoking Actions on Component Initialization.