【Vue.js】v-for文でデータを展開したい

    <div id="app">
        <ul>
   // v-forで展開するが、itemsの部分はscriptの配列と合致していればなんでもいい。
    //また、「i」自体も特に意味を持っていない。$iや$valのようなものと考える。
            <li v-for="i in items">{{i.product}}:{{i.price}}</li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
    //itemsの部分はv-forで展開する部分と合致していればなんでもいい。
                items:[
                    {id:0,product:'最新のMac',price:9000},
                    {id:1,product:'中古のMac',price:9000},
                    {id:2,product:'ダメのMac',price:9000},
                    {id:3,product:'綺麗なMac',price:9000},
                    ]
                },
        });
    </script>