Vueにおけるv-showディレクティブ
条件付き表示のもう一つの選択肢は、
ディレクティブ v-showです。
使い方は非常に似ています：
<template>
<p v-show="isAuth">
+++
</p>
</template>
v-show を使用した要素は常にレンダリングされ、
DOM内に残り続ける点が異なります。
切り替わるのはそのCSSプロパティ display だけです。
ディレクティブ v-if は、「本当の」条件付きレンダリングを行います。
なぜなら、条件が切り替わる際に、
ブロック内のイベントリスナーや子コンポーネントが適切に破棄され、
再作成されることが保証されるからです。
また、ディレクティブ v-if はレイジー（遅延評価）です：
初期レンダリング時に条件が偽の場合、何も行いません。
条件が真になるまで、条件付きブロックはレンダリングされないのです。
それに対して、v-show はずっとシンプルです。
要素は初期状態に関わらず常にレンダリングされ、
CSSベースで切り替わります。
一般的に、v-if は切り替え時のコストが高く、
v-show は初期レンダリング時のコストが高くなります。
したがって、頻繁に切り替わる場合は v-show を、
実行中に条件が変わらない可能性がある場合は v-if を優先して使用してください。
ディレクティブ v-show は template 要素では使用できず、
v-else とも連動しません。
段落とボタンがあります。 ボタンをクリックすると段落の表示/非表示が切り替わるようにしてください。
ディレクティブ v-show と v-if の違いについて説明してください。
ディレクティブ v-show をいつ使用し、
ディレクティブ v-if をいつ使用すべきか説明してください。
ディレクティブ v-show にはどのような制限がありますか。
