Skip to main content

If and Else Attribute

These directives enable you to conditionally render elements based on the truthiness of an expression

Usage

$if

$if Add the $if attribute to an element, setting its value to a condition

~index.html
<div $if="condition">This will only be shown if the condition is true</div>

$else

The $else directive is used in conjunction with $if to provide an alternative when the condition is false:

~index.html
<div $if="isLoggedIn">Welcome, user!</div>
<div $else>Please log in</div>

Behavior

  • When the condition in $if is true, the element is displayed, and any corresponding $else element is hidden.

  • When the condition is false, the $if element is hidden, and the $else element (if present) is displayed.

  • The framework automatically updates the visibility when the condition changes.

Notes

note
  • The condition is evaluated in the context of the global $ object.
  • You can use any valid JavaScript expression as the condition.
  • Multiple $if/$else pairs can be used in the same template. :::