【Vue】入門編(v-for)

こんにちは。
本日はVue.jsの入門編です。

概要

v-forとは

v-forディレクティブで、配列もしくはオブジェクトのデータを
リストレンダリングを行うことができます。

記載方法は以下です。 v-for="要素 in 配列" v-bind:key=...を指定することで、
一意なキーを各要素に与えることができます。

サンプルソース

春〜冬をv-forで表示してみたいと思います。

<div id="app">
    <ul>
        <li v-for="item in items" v-bind:key="item.id">
            {{ item.name }}
        </li>
    </ul>
</div>
<script>
    var items = [
        {
            id  : 1,
            name : '春',
        },
        {
            name  : 2,
            name : '夏'
        },
        {
            name  : 3,
            name : '秋'
        },
        {
            name  : 4,
            name : '冬'
        }
    ]

    new Vue({
        el: '#app',
        data: {
            items: items
        }
    });
</script>

以上です。