vue.js学習メモ①

v-ifディレクティブ

DOMの切り替えに使う。 引数に真偽値のdataを渡す。

dataがfalseの場合、タグがDOMから削除され、代わりにコメントが挿入される。 v2.1以降であればv-if-elseディレクティブが使える。

templateディレクティブ

複数のタグをv-ifで囲みたいときに利用する。 それぞれにv-ifを書いて同じdataを参照させるよりもスマート。

v-showディレクティブ

v-ifとは異なり、styleにdisplay:noneが付与されるだけでタグは残る。 基本的にはv-ifのほうがパフォーマンス面で有利。

v-forディレクティブ

繰り返し処理に使う。 v-for="item in list"の形式で使用する。 v-for="(item, i) in list"とすることでインデックスが使用できる。 順番は守ること。

ネストしていないタグで同じループを共有したい場合はtemplateディレクティブを使用する。

配列以外のオブジェクトの場合はv-for="(value, key) in objects"の形式でkeyを利用できる。 順番は守ること。

3番目にv-for="(value, key, index) in objectes"の形式でindexが利用できる。