i-if

Overview

In Olova.js, the i-if and i-else directives work together to conditionally render elements based on the value of a reactive variable.

• i-if displays an element if the condition is true.
• i-else acts as a fallback and renders another element when the condition is false.

This guide demonstrates how to toggle between two pieces of content using i-if and i-else, controlled by a reactive boolean variable (isTrue).

In this example, we demonstrate how to use the i-if directive to show or hide an element based on a boolean variable (isTrue). Additionally, a button is provided to toggle this variable and control the visibility of the element.

Example Code

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    isTrue: false, // Initial boolean value
  },
  template: `
    <h1 i-if="isTrue">It will be shown when isTrue = true</h1>
    <h1 i-else>It will be shown when isTrue = false</h1>
    <button @click="isTrue = !isTrue; console.log(isTrue)">Toggle</button>
  `,
});

app.mount("#root");

In this example:

Clicking the "Toggle Visibility" button triggers the toggleCondition method, which flips the value of isTrue. The content of the <h1> element changes depending on the value of isTrue, using i-if and i-else to control which element is displayed.

It will be shown when isTrue = false

Breakdown

Data

The data

isTrue: This reactive boolean value controls the conditional rendering of the two <h1> elements. It is initially set to false.

i-if Directive

• i-if is a conditional rendering directive that allows elements to appear or disappear based on a condition. If the condition evaluates to true, the element is rendered. If false, the element is removed from the DOM entirely.

i-else Directive

• i-else renders the second <h1> element if the i-if condition is false.
• If isTrue is false, the text "It will be shown when isTrue = false" appears.

template

The template consists of:

• An <h1> with i-if to conditionally display content when isTrue is true.

• Another <h1> with i-else to show alternative content when isTrue is false.

• A <button> that toggles the isTrue value between true and false, which switches the content rendered between the two <h1> elements.

Key Features

• Conditional Rendering with i-if and i-else: Using these two directives, you can toggle between two different pieces of content based on a reactive condition.

• Reactiveness: The isTrue variable is reactive, so changes to its value automatically update the DOM, toggling between the two states.

Conclusion

The i-if and i-else directives in Olova.js provide a powerful way to conditionally render elements in your application based on reactive state. This allows you to manage different content views based on specific conditions in a clean and declarative manner.

• Efficient DOM Updates: Only one of the two elements is rendered at any given time, ensuring efficient DOM manipulation.

• Seamless User Interaction: Users can toggle between different content states with the click of a button, and the framework automatically handles updating the view based on the new state.

Additional Use Cases

• Combine i-if and i-else with other directives like i-for for more dynamic and complex conditional rendering.

• Extend the logic with more reactive state variables to handle multiple conditions.