v-forとは？
リスト形式にレンダリングする事ができます。
配列のv-for
inを使用して取得できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="app"> <ul> <li v-for="(animal,index) in animals">{{ index }}{{ animal}}</li> </ul> </div> <script> new Vue({ el: "#app", data: { animals: ['dog', 'cat', 'lion'] } }) </script> |
オブジェクトのv-for
オブジェクトのvalueの値（下記例で言えば「太郎」、「25」）が出力されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="app"> <ul> <li v-for="value in person">{{ value }}</li> </ul> </div> <script> new Vue({ el: "#app", data: { person: { name: '太郎', age: 25 } } }) </script> |
オブジェクトの場合はindexの値ではなく、keyの値を取得する事が可能になります。
|
1 2 3 |
<ul> <li v-for="(value,key) in person">{{key}}{{ value }}</li> </ul> |
数値をv-forで回す
単純に配列やオブジェクトではなく数値を元にループを回す事も可能です。
|
1 2 3 |
<ul> <li v-for="n in 5">{{n}}</li> </ul> |
v-forで表示された配列を操作したい場合
v-forで例えばinputタグ等を利用して末尾の要素を削除した場合はinputタグの内容も連動して移動しないです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="app"> <ul> <li v-for="(animal,index) in animals">{{ animal}}<input type="text" /></li> </ul> <button @click="remove">削除ボタン</button> </div> <script> new Vue({ el: "#app", data: { animals: ['dog', 'cat', 'lion'], }, methods: { remove: function () { this.animals.shift(); } } }) </script> |
下記のように記述すれば中身も連動して描画されるようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="app"> <ul> <li v-for="(animal,index) in animals" :key="animal">{{ animal}}<input type="text" /></li> </ul> <button @click="remove">削除ボタン</button> </div> <script> new Vue({ el: "#app", data: { animals: ['dog', 'cat', 'lion'], }, methods: { remove: function () { this.animals.shift(); } } }) </script> |
この記事へのコメントはありません。