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>
<sample2 comment2 = "Riot.js sample2"></sample2>

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

</body>
</html>


sample.tag


<sample>

<h1>{ comment }</h1>

<style scoped>

h1 {
color: #00AA00;
}

</style>

<script>

this.comment= "Riot.js sample";

</script>

</sample>

<sample2>

<p>{ comment2 }</p>

<style scoped>

p {
color: #0D47A1;
}

</style>

<script>

this.comment2= opts.comment2;

</script>

</sample2>


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

riot-js_004_01


変数「comment」の値をh1タグで表示:


<h1>{ comment }</h1>

this.comment= "Riot.js sample"


変数「comment2」の値を設定:


<sample2 comment2 = "Riot.js sample2"></sample2>


取得した変数「comment2」の値をpタグで表示:


<p>{ comment2 }</p>

this.comment2= opts.comment2


{}内にJSが記述できるので、変数を設定してhtml → tag内での値の代入をすることもできます。





book


Q&A