lu-show ​

lu-show toggles the visibility of an element by manipulating its CSS display property.

Basic Usage ​

<div lu-scope="{ ok: true }">
  <h1 lu-show="ok">Hello!</h1>
  <button @click="ok = !ok">Toggle Visibility</button>
</div>

Behavior ​

lu-show works by adding an inline display: none style to the element when the expression is false. When the expression is true, it restores the element's original display value (either from an existing inline style or the default for that element type).

Preservation of Initial State ​

Lune intelligently stores the initial display property of your element when the application is mounted. This means if your element was originally display: flex or display: inline-block, lu-show will correctly restore that state.

Comparison with lu-if ​

While lu-if and lu-show both conditionally control visibility, they have different trade-offs:

Performance Considerations ​

When to use lu-show ​

Use lu-show for elements that need to be toggled frequently (e.g., dropdowns, tooltips, tabs, or menus). Since the element is already rendered, toggling is near-instantaneous and doesn't trigger expensive template processing or component lifecycle hooks.

When to avoid lu-show ​

Avoid lu-show for large, complex sections of your page that are rarely shown. For these cases, lu-if is better because it prevents the initial rendering and reduces the memory footprint of your application.

Use Case Examples ​

Interactive Search Filter ​

lu-show is perfect for filtering lists in real-time, as it avoids re-creating DOM nodes for every keystroke.

<div lu-scope="{ query: '', items: ['Apple', 'Banana', 'Cherry'] }">
  <input lu-model="query" placeholder="Search..." />
  <ul>
    <li lu-for="item in items" lu-show="item.toLowerCase().includes(query.toLowerCase())">{{ item }}</li>
  </ul>
</div>

Tabbed Interface ​

Easily toggle between multiple content sections.

<div lu-scope="{ activeTab: 'tab1' }">
  <nav>
    <button @click="activeTab = 'tab1'">Tab 1</button>
    <button @click="activeTab = 'tab2'">Tab 2</button>
  </nav>

  <div lu-show="activeTab === 'tab1'">Content 1</div>
  <div lu-show="activeTab === 'tab2'">Content 2</div>
</div>