【Vue.js】v-forでリスト表示してみる
Vue.jsのv-forを使ったリスト表示の簡単な例です。
前はv-repeatがあった気がしますが、いつの間にかなくなっているみたいです。
デモサイト
サンプル1
HTMLで「v-for=”list in lists”」と指定し、{{list}}で呼び出しています。
<div id="demo1"> <ul> <li v-for="list in lists">{{list}}</li> </ul> </div>
Vue.jsはこのように書いています。
new Vue({ el: '#demo1', data: { lists: [ 'りんご', 'バナナ', 'パイナップル', 'スイカ', 'いちご' ] } });
サンプル2
ちょっと違う書き方。
<div id="demo2" class="section"> <ul> <li v-for="list in lists">{{$index}} - {{list.fruit}}</li> </ul> </div>
v-for内では配列の番号を持っていて$indexで参照できるようです。
これはサンプル1の書き方でも同様。
new Vue({ el: '#demo2', data: { lists: [ {fruit: 'りんご'}, {fruit: 'バナナ'}, {fruit: 'パイナップル'}, {fruit: 'スイカ'}, {fruit: 'いちご'} ] } });
簡単な例ですが、今度はv-forを使っていろいろやってみます。