dayjournal | Riot.js #007

今回は、Riot.jsで条件分岐をする方法を紹介します。基本的には「if」を利用しますが、今回は「show」と「hide」についても紹介します。

条件分岐をするためには下記のように記述します。

index.html


<!DOCTYPE html>
<html lang="ja">
    <head>

        <meta charset="UTF-8">
        <title>Riot.js sample</title>

        <script src="./library/riot/riot+compiler.js"></script>

        <script src="./tag/sample.tag" type="riot/tag"></script>

    </head>
    <body>

        <sample></sample>

        <script>riot.mount('*');</script>

    </body> 
</html>

sample.tag


<sample>

    <h1 if={list}>h1タグ</h1>
    <h2 show={list}>h2タグ</h2>
    <p hide={list}>pタグ</p>

    <style scoped>

        h1 {
            color: #0D47A1;
        }

        h2 {
            color: #8b1014;
        }

        p {
            color: #00AA00;
        }

    </style>

    <script>

        this.list = true;

    </script>

</sample>

index.htmlを実行すると下記のようにブラウザで表示されます。

条件分岐でタグを表示：

if = true/表示、false/削除 show = true/表示、false/display:none hide = true/display:none 、false/表示


    <h1 if={list}>h1タグ</h1>
    <h2 show={list}>h2タグ</h2>
    <p hide={list}>pタグ</p>

    <script>

        this.list = true;

    </script>

ifやshowやhideを利用することによりタグの表示・非表示を操作することができます。

dayjournal memo

Riot.js #007 – 条件分岐

Yasunori Kirimoto 2017/1/24

index.html

sample.tag