どのようなプログラミング言語でも、テンプレートエンジンでも、ループを行うための仕組みがあります。
Vue でそれを行うのは、v-for 属性です。なお Vue 独自の属性には、すべて v- というプレフィクスがついています。
データは list という配列で、要素は ‘a’ ‘b’ ‘c’ という3つの文字列です。
HTML では、v-for タグを使用して、ループを行っています。v-for では、それを指定したタグが、指定した内容に基づいて複数回レンダリングされます。
for (...) {
<span>...</span>
}
的な書き方ではありません。
v-for に指定するのは、配列((オブジェクトも指定できます。その場合はオブジェクトのプロパティをループすることになります。))の指定と、その要素にアクセスする変数名の指定です。
{要素の変数名} in {配列} となります。 指定した list は ‘a’ ‘b’ ‘c’ という3つの文字列だったので、item in list の item には、 ‘a’ ‘b’ ‘c’ が順番に入ることになります。
<span v-for="(item, index) in list">{{ index }} {{ item }}</span>
このようにすることで、インデックスを取得することもできます。foreach 系言語構文でインデックスを扱うには自前でインクリメントしないといけない場合もありますので、これは便利です。
そして、v-for に指定する配列の要素は、オブジェクトでも大丈夫です。
実際のシステムでは、オブジェクト構造、リスト構造がネストし、それらをループしながらデータを入力させたり表示させたりすることは常です。
PHP であれば、どんな name 属性にするか考慮が必要になります。name 属性自体はフラットなため、name=”list[0][‘name’]” のような書き方をしなければなりません。
これではネストが深くなったときに苦しくなってくるのは明らかです。
これに対し Vue では、上記のコードのように v-model=”item.name” というとても直感的な書き方ができています。