v-if, v-showによる表示/非表示の切り替え

Vue3ではv-showを使うことで要素を表示したり非表示にすることができます。以下のコードはボタンをクリックするとその下にある要素を表示したり非表示にすることができます。

ボタンをクリックするとOnClick関数が呼び出されてshowがtrueになったりfalseになります。これによって文字列の表示と非表示を切り替えることができるのです。

v-showではなくv-ifを使う方法もあります。showがtrueであればその要素が表示され、そうでない場合はv-elseの要素が表示されます。

v-showとv-ifはどのような違いがあるのでしょうか?違いは要素がDOMに残るかどうかです。v-ifで非表示になる場合は、DOMから完全に削除されます。それに対してv-showはdisplay: none;というスタイル属性がつくだけでDOMから削除されてしまうわけではありません。

そのためv-ifのほうが計算コストが大きくなります。表示の切り替えが頻繁に行なわれる場合はv-ifではなくv-showを使ったほうがよさそうです。表示の切り替えが頻繁に行われない場合は、v-ifを使用するほうがv-showと比べてリソースを節約することができます。

配列の表示 v-for

配列の中身を表示させたい場合はv-forが便利です。

以下はテキストボックスに文字列を入力してボタンをクリックすると新しい要素が追加されるコードです。

v-for ディレクティブを使う際の注意点として、key属性 を忘れずに付与すること。vueには要素の移動を最小限に抑えるアルゴリズムが採用されているため、可能な限りその場の近い同じ要素を再利用しようとする性質(状態の維持)があるため、予期せぬバグが発生する可能性があります。その対策として、key属性を付与することで要素とデータとを関連付けます。これによってバグを防ぐことができます。

配列だけでなくオブジェクトも表示させることができます。そのさい引数を3つ (value, key, index) まで取ることができます。

v-for=”数値 in カウント数”と書けばfor文のような指定回数の繰り返し処理もできます。