riot-js_001_01


今回は、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を実行すると下記のようにブラウザで表示されます。
riot-js_008_01


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


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


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

<script>

this.visible = true;

this.click = function() {

this.visible = !this.visible;

}.bind(this);

</script>


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





book


Q&A