riot-js_001_01


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


条件分岐でタグを表示:

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を利用することによりタグの表示・非表示を操作することができます。





book


Q&A