VueJSでループ処理

初めてのJavaScript 第3版 ES2015以降の最新ウェブ開発 [ Ethan Brown ]

VueJSでループ処理

v-forプロパティにて配列に対するループ処理を実行することが可能です。

以下の例ではkeywordListリストをループし描画するサンプルとなっております。

<div id="container" class="sample1">
    <li v-for="item in keywordList" :key="item.id">
        <span>{{ item.name }}</span>
    </li>
</div>
<script type="text/javascript">
// Vue
const vm = new Vue({
    el: '#container',
    data: {
        keywordList: [
            {
                id:1,
                name:"要素1"
            },
            {
                id:2,
                name:"要素2"
            },
            {
                id:3,
                name:"要素3"
            },
            {
                id:4,
                name:"要素4"
            },
            {
                id:5,
                name:"要素5"
            }
        ]
    },
    created: function() {
    }
});
</script>