Vue.jsで要素の表示と非表示を切り替ええたい場合には、v-showディレクティブを使う方法と、v-ifディレクティブを使う方法があります。
v-showディレクティブとv-showディレクティブは、要素の表示と非表示を切り替えるため、表面的な結果としては同じになります。
しかし、v-showディレクティブとv-ifディレクティブは、それぞれ適したコンテキストで使用されます。
ここでは、v-showディレクティブとv-showディレクティブの使用（適用）について紹介します。
v-showの動作
v-showディレクティブで描画された要素は、v-showディレクティブの引数に指定した値によって要素を表示または非表示にする際に、要素のdisplay CSSのプロパティを切り替えます。
display CSSのプロパティによって要素の表示と非表示が切り替わるということは、v-showディレクティブによる要素は常に描画されてDOMに維持されるということになります。
v-showディレクティブに指定された引数の値がfalseの場合はCSS（スタイルシート）のdisplayにnoneが設定され、trueの場合はCSS（スタイルシート）のdiplayがnone以外に設定されます。
v-showディレクティブによって非表示になった要素は、HTML上には存在しますのでアクセスすることができます。
v-ifの動作
v-showディレクティブで描画された要素は、v-ifディレクティブの引数に指定した値によって要素を表示または非表示にする際に、要素の生成と要素の削除を行います。
v-ifディレクティブに指定された引数の値がtrueの場合は要素が作成（追加）され、falseの場合は要素が削除（消去）されます。
つまり、v-ifディレクティブに指定された引数がtrueの時はHTML上にv-ifディレクティブが指定された要素が存在しますが、falseの時は要素自体が存在しなくなります。
v-ifディレクティブによって非表示になった要素は、HTML上に存在しませんのでアクセスすることができません。
v-showまたはv-ifディレクティブの引数の初期値がfalseの場合
v-showディレクティブでは、要素の初期表示有無（引数がtrueであるかfalseであるかに）かかわらず、要素は常に描画されます。
一方、v-ifディレクティブでは、要素の初期表示有無（引数がtrueであるかfalseであるかに）よって、要素を描画するかどうかが決定されます。初期表示の指定がtrueであれば描画され、falseであれば描画されません（何も行われません。）
v-ifディレクティブでは、引数の値にtrueが指定された時に要素が描画（追加）され、falseが指定された時には要素が破棄されます。
v-show、v-ifのコスト
v-showディレクティブは、v-ifより高い初期描画コストを持っています。一度描画してしまえば要素の表示をCSSで制御することになりますので、切り替えコストは低くなります。
v-ifディレクティブは、要素の表示と非表示を要素の追加と削除によって行いますので、v-showより高い切り替えコストを持っています。
v-ifディレクティブに指定された引数の初期値がtrueの場合は、要素が描画されますのでv-showと同等の初期描画コストがかかります。しかし、初期値がfalseの場合は、要素自体が描画されませんのでコストがかかりません。
v-showとv-ifの使いどころ
ここまでv-showディレクティブとv-ifディレクティブの動作（使用）について紹介してきました。
v-showディレクティブは、より高い初期描画コストを持っています。それに対してv-ifディレクティブは、より高い切り替えコストを持っています。
そのため、頻繁に要素の表示と非表示を切り替える必要があればv-showディレクティブを選び、条件が実行時に変更することがほとんどない場合はv-ifディレクティブを選びます。
