【Vue.js】v-forディレクティブ
はじめに
v-forがなぜ機能するか、初見でよくわからなかった。
理由としては
<ul id="example-1"> <li v-for="item in items" :key="item.message"> # ↑のclassかのように書かれてるのが個人的に癖がありすぎた。 {{ item.message }} </li> </ul>
勉強不足だとは思うが、" "に囲われる文でマッチさせるという発想がなかったです。
噛み砕いて書くと
HTML
<ul id="example-1"> <li v-for="①item in ②items" :key="item.message"> {{ ①item.message }} </li> </ul>
Vue.js
var example1 = new Vue({ el: '#example-1', data: { ②items: [ { message: 'Foo' }, { message: 'Bar' } ] }
結果
・Foo
・Bar
①に②を入れるよ ってことでした。
messageは配列に入ったkeyと同じなので、割愛。