dayjournal | Riot.js #008 – イベント処理

今回は、Riot.jsでイベント処理をする方法を紹介します。

イベント処理をするためには下記のように記述します。

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>h1タグ</h1>
    <h2 if={visible}>h2タグ</h2>
    <p>pタグ</p>
    <button onclick={click}>click</button>

    <style scoped>

        h1 {
            color: #0D47A1;
        }

        h2 {
            color: #8b1014;
        }

        p {
            color: #00AA00;
        }

    </style>

    <script>

        this.visible = true;

        this.click = function() {

            this.visible = !this.visible;

        }.bind(this);

    </script>

</sample>

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

ボタンをクリックするとh2タグが非表示になります。もう一度クリックすると表示になります。

ボタンをクリックでイベント処理：


    <button onclick={click}>click</button>

    <script>

        this.visible = true;

        this.click = function() {

            this.visible = !this.visible;

        }.bind(this);

    </script>

クリック等のイベント処理をすることもできます。

dayjournal memo

Riot.js #008 – イベント処理

Yasunori Kirimoto 2017/1/26

index.html

sample.tag