- v-if, v-forの使い方がわからない…
- v-if, v-forってどうやって使うんだっけ？
このような疑問にお答えします。
- v-ifを使って条件付きレンダリング！
- v-forを使ってリストレンダリング！
- 複数の要素に対して使いたいときはtemplateタグを使う！
超初心者向けVue.js入門講座です。
一緒にVue.jsを勉強して、Vue.jsを楽しみましょう！
今回は条件付きレンダリング(v-if)とリストレンダリング(v-for)について解説していきます。
- Vue.jsが初めての人
- Vue.jsを復習したい人
- Vue.jsを動かしてみたい人
v-ifを使って条件付きレンダリング！
v-ifは条件付きレンダリングを行うためのものです。
if文をイメージしていただければわかりやすいと思います。
条件がtrueであれば表示、falseであれば非表示にすると言ったイメージです。
では実際にサンプルコードを見てみましょう。
このように、ある条件で表示を切り替えるために使用するのがv-ifになります。
v-elseを使って逆の条件の処理を行う！
ifがあるならelseもありますよね。
v-ifがfalseの場合の処理はv-elseを使用します。
ではサンプルコードを見てみましょう。
このようにv-ifがfalseのときの処理を行うのがv-elseになります。
v-else-ifを使って別の条件の処理を追加する！
if, elseときたら…else-ifですよね。
v-ifに更に別の条件の処理を追加したい場合はv-else-ifを使用します。
サンプルコードを見てみましょう。
このように別の条件の処理を追加していくときはv-else-ifになります。
おまけ：表示は同じだけどv-showは隠してるだけ！
v-ifと非常に似ているディレクティブとしてv-showがあります。
どちらも目に見える動きは同じです。
実際に見てみましょう。
では何が違うのでしょうか？
実は非表示となったときの処理に次のような違いがあります。
要素を削除する
要素を非表示にする
(display: none)
デベロッパーツールで確認できるよ！
v-showは最初にすべて表示してから隠すので初期描画が遅いのですが、表示の切り替えは速いです。
つまり、表示を
- あまり切り替えない場合はv-if
- 頻繁に切り替える場合はv-show
を使用しましょう！
v-forを使ってリストレンダリング！
v-forはリストレンダリングを行うためのものです。
こちらはfor文をイメージしていただければわかりやすいと思います。
配列をループさせて処理するイメージです。
では実際にサンプルコードを見てみましょう。
for-in構文と同じですね。
このように、配列をレンダリングするために使用するのがv-forになります。
インデックスも取得できる！
v-forはインデックス（順番）を取得することもできます。
2つ目の引数がインデックスとなっています。
では実際にインデックスを取得してみます。
それほど難しくないですね。
こちらの取得は任意なので必要であれば取得してください。
オブジェクトにも使える！
v-forは配列だけでなくオブジェクトにも使用できます。
基本的には配列の場合とほとんど同じです。
オブジェクトの場合、第2引数はキーとなります。
そしてインデックスは第3引数になります。
配列の場合：
- 第1引数：value
- 第2引数：index
オブジェクトの場合：
- 第1引数：value
- 第2引数：key
- 第3引数：index
整数値にも使える！
v-forは整数値にも使えます。
この要素を5回ループさせたい！
みたいなときありますよね。
このようなときに整数値を使用します。
配列のときとほとんど同じなので問題ないと思います。
このように指定した数値だけループさせることも可能です。
重要！v-forを使用するときは必ずkey属性を指定しよう！
まずはこちらのサンプルを動かしてみてください。
すべてのテキストボックスに違う文字列を入れた後にボタンを押すと…何かおかしいですよね。
そうなんです、削除したときにテキストボックスの値が残ってしまっています。
このような挙動になる原因は、v-forの特徴にあります。
実はv-forには
- 要素の移動を最小限に抑える
- 可能な限り要素を再利用する
といった特徴があります。
そのため、要素の移動を最小限に抑え、可能な限り要素を再利用した結果、このような挙動になったのです。
ではこの現象を回避するためにはどうしたら良いのか、そこで出てくるのがkey属性です。
key属性を指定してみました。
想定通りの挙動になりましたね。
このような思わぬバグを生まないように、v-forを使用するときは必ずkey属性を指定しましょう。
複数の要素に対して使いたいときはtemplateタグを使う！
HTML5にはtemplateタグというものが存在します。
こちらを使用することでv-ifやv-forで複数の要素を扱うことができます。
まずは実際に見てみましょう。
デベロッパーツールを使用してElementsを見てもらえればわかるのですが、templateタグは全く表示されません。
要素をグループ化させるためだけに存在しています。
このようにtemplateタグを使用してグループ化することで、表示に影響を与えずにv-ifやv-forを複数の要素に適用できます。
複数の要素にv-if, v-forを適用させたいときはtemplateタグを使用しましょう。
まとめ
- 条件付きレンダリング
v-if,v-else,v-else-ifがあるよ！v-ifとv-showは似てるけど要素を削除するかどうかの違いがあるよ！
- リストレンダリング
v-forは配列、オブジェクト、整数値に使えるよ！v-forを使用するときは必ずkey属性を指定しよう！
- 複数の要素に
v-if,v-forを適用させたいときはtemplateタグを使おう！
ぜひv-ifとv-forを使ってみてください！
