何かのリストがあって最初は上から３件だけを表示させ、「一覧を見る」みたいなボタンをクリックするとリストの全部を表示させる。みたいなSPAのサイトを作るときのメモ。

　eachの後にifをいれる。

eachでループ処理する際に、ループする回数が取得できる。
ループ回数がiに入ってくるので、それをifで判定してあげる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<app></app>

<script type="riot/tag">
<app>
    <ul>
        <li each={ t, i in this.arr } if={ i < 3 }>{ t.text }</li>
    </ul>
    this.arr = [
        {text:"１つめ"},
        {text:"２つめ"},
        {text:"３つめ"},
        {text:"４つめ"},
        {text:"５つめ"},
    ]
</app>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.11/riot+compiler.min.js"></script>
<script>riot.mount('*')</script>
</body>
</html>

Riotjsで任意の回数だけループさせる

eachの後にifをいれる。

　eachの後にifをいれる。