条件付きレンダリング
#目次
- ##キーを使用して再利用可能な要素を管理
v-show- ##v-if 対 v-show
- v-v-for
#v-if
##v-if ディレクティブは、コンテンツのブロックを条件付きでレンダリングするために使用されます。このコンテンツは、ディレクティブの式が真の値を返した場合にのみ表示されます。
<h1 v-if="awesome">Vue is awesome!</h1>
v-else
: <h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ??</h1>
<template>
要素に対して
条件付きレンダリング グループ化を使用しますv-if
はディレクティブであるため、 , したがって、要素に追加する必要があります。しかし、複数の要素を切り替えたい場合はどうすればよいでしょうか?このとき、<template> 要素を非表示のラッピング要素として扱い、それに
を使用できます。最終的なレンダリング結果には、<template>
要素は含まれません。 <template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else コマンドを使用できます。 v-if の「else ブロック」を表すには:
v-if<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else 要素の直後に
v- が続く必要があります。 else-if
を要素の後に追加します。それ以外の場合は認識されません。v-else-if
##2.1.0 新しい
v-else-if は、名前が示すように、
v-if
に似ていますが、<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>は
v-else
v-else-if も要素の直後に
v-if または
v-else-if を続ける必要があります### 後。
再利用可能な要素を管理するには
key を使用します
Vue は最善を尽くします多くの場合、要素を最初からレンダリングするのではなく、既存の要素を再利用することで、要素を効率的にレンダリングできます。これにより、Vue が非常に高速になるだけでなく、他にもいくつかの利点があります。たとえば、ユーザーが異なるログイン方法を切り替えることを許可する場合:
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template>
上記のコードで loginType
を切り替えても、ユーザーが入力した内容はクリアされません。両方のテンプレートが同じ要素を使用しているため、<input>
は置換されず、その placeholder
のみが置換されます。
自分で試してみて、入力ボックスにテキストを入力してトグル ボタンを押してください:
これは問題ありません。実際のニーズを常に満たすわけではないため、Vue は「これら 2 つの要素は完全に独立しており、再利用しないでください」を表現する方法を提供します。一意の値を持つ key
属性を追加するだけです:
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template>
これで、入力ボックスが切り替わるたびに再レンダリングされるようになります。参照:
##<label> 要素には
key 属性が追加されていないため、引き続き効率的に再利用されることに注意してください。
##v-show
別のものが次に従って使用されます。要素を条件付きで表示するオプションは、v-show
ディレクティブです。使用方法はほぼ同じです。
<h1 v-show="ok">Hello!</h1>
違いは、v-show
を持つ要素が常にレンダリングされ、DOM に残ることです。 v-show
は、要素の CSS プロパティ display
を単純に切り替えます。
v-showは
<template>
要素をサポートしておらず、v-else
もサポートしていないことに注意してください。
v-if vs
v - show
v-ifは、条件ブロック内のイベントが切り替え中に確実に処理されるため、「真」の条件付きレンダリングです。リスナーとサブコンポーネントは破棄され、適切に再作成されます。
v-if
対照的に、
v-show
一般に、
v-if
v-show は初期レンダリング オーバーヘッドが高くなります。したがって、非常に頻繁に切り替える必要がある場合は、
v-show を使用することをお勧めします。実行時に条件がほとんど変更されない場合は、
v-if を使用することをお勧めします。
v-if
v-for
## と一緒に使用します
v-if
と
v-forを同時に使用することはお勧めできません。詳細については、
スタイルガイドを参照してください。
v-if を
v-for とともに使用すると、
v-for の方が
v- よりもパフォーマンスが高くなります。 if 優先度が高くなります。詳細については、
リスト レンダリング ガイドを参照してください。