pp-if

The pp-if directive is used to conditionally show or hide elements in the DOM. It works in combination with pp-elseif and pp-else to form logical rendering chains similar to standard if/else control flows.

Use Cases

  • Show elements based on a single or multiple conditions
  • Implement conditional rendering in a readable way
  • Use fallback elements when no condition is met

Syntax

  • pp-if="condition" — Renders the element only if the condition is true.
  • pp-elseif="anotherCondition" — Checked if the previous pp-if or pp-elseif failed.
  • pp-else — Rendered only if no previous conditions were met.

Behavior

  • Only one branch of the pp-if / pp-elseif / pp-else chain is shown at a time.
  • Each expression is automatically tracked for dependencies and re-evaluated on changes.
  • Re-evaluation is optimized so that each chain is updated once per reactive cycle.
  • All other branches in the chain are hidden using the hidden attribute.

Example Usage

When working with strings, integers, or floats, you should use comparison operators in the condition to check for specific values. If the variable you want to validate is a boolean, you can simply pass the variable to pp-if="variable"; it will be evaluated as true or false automatically. 

<div pp-if="status === 'loading'">Loading...</div>
<div pp-elseif="status === 'success'">Loaded successfully!</div>
<div pp-else="true">Failed to load.</div>

<button onclick="status = 'success'">Set Success</button>
<button onclick="status = 'error'">Set Error</button>

<script>
  pphp.state('status', 'loading');
</script>

The above example conditionally shows different messages based on the value of the status state. Only one of the three messages is visible at any time.