Tech and Media Labs
This site uses cookies to improve the user experience.




Riot.js Conditionals

Jakob Jenkov
Last update: 2017-05-27

Riot.JS conditionals are Riot.JS expressions which can show, hide or completely omit HTML elements from the HTML a Riot.JS tag generates.

Riot.JS contains the following conditionals:

  • if
  • show
  • hide

We will cover all three in this Riot.js conditionals tutorial.

if

The if conditional will include an HTML element if the condition specified is true. Otherwise it will be excluded. By excluded I mean completely left out of the HTML / DOM. It won't be present at all.

Here is an example showing the Riot.JS if conditional in action:

<mytag>
    <h1>This is MyTag</h1>

    <h2 if={visible}>If Conditional</h2>

    <script>
        this.visible = true;
    </script>
</mytag>

This example will include the <h2> element if the expression {visible} is true, and exclude the element if not.

show

The show conditional will show an HTML element if the condition specified is true. Otherwise the HTML element will be hidden. If hidden, the HTML element will still be part of the HTML / DOM. It will just not be visible.

Here is an example showing the Riot.js show conditional in action:

<mytag>
    <h1>This is MyTag</h1>

    <h2 show={show}>Show Conditional</h2>

    <script>
        this.show    = true;
    </script>
</mytag>

This example will show the <h2> element if the expression {show} is true. If not, the HTML element will be hidden (not excluded, just not visible).

hide

The hide conditional is the reverse of the show conditional. The hide conditional will hide an HTML element if the condition specified is true. Otherwise the HTML element will be shown (visible). If hidden, the HTML element will still be part of the HTML / DOM. It will just not be visible.

Here is an example showing the Riot.js hide conditional in action:

<mytag>
    <h1>This is MyTag</h1>

    <h2 hide={visible}>Hide Conditional</h2>

    <script>
        this.hide    = true;
    </script>
</mytag>

This example will hide the <h2> element if the expression {hide} is true. If not, the HTML element will be hidden (not excluded, just not visible).

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC