条件付きレンダリング


#目次

# と併用した場合


#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>

を使用して「else ブロック」を追加することもできます。

<template>
要素に対して

v-if

条件付きレンダリング グループ化を使用しますv-if はディレクティブであるため、 , したがって、要素に追加する必要があります。しかし、複数の要素を切り替えたい場合はどうすればよいでしょうか?このとき、<template> 要素を非表示のラッピング要素として扱い、それに

v-if

を使用できます。最終的なレンダリング結果には、<template> 要素は含まれません。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

##v-else


v-else コマンドを使用できます。 v-if の「else ブロック」を表すには:

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>
v-else 要素の直後に v-if

または

v- が続く必要があります。 else-if

を要素の後に追加します。それ以外の場合は認識されません。

v-else-if


##2.1.0 新しい

v-else-if は、名前が示すように、v-if

の「else-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 のみが置換されます。


自分で試してみて、入力ボックスにテキストを入力してトグル ボタンを押してください:

1.gif

これは問題ありません。実際のニーズを常に満たすわけではないため、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>

これで、入力ボックスが切り替わるたびに再レンダリングされるようになります。参照:

2.gif

##<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

も遅延型です: 最初のレンダリングで条件が false の場合、最初に条件が true になるまでは何も行われません。ブロック。

対照的に、v-show

ははるかに単純です。要素は初期条件に関係なく常にレンダリングされ、CSS に基づいて切り替えるだけです。

一般に、v-if

はスイッチング オーバーヘッドが高く、

v-show は初期レンダリング オーバーヘッドが高くなります。したがって、非常に頻繁に切り替える必要がある場合は、v-show を使用することをお勧めします。実行時に条件がほとんど変更されない場合は、v-if を使用することをお勧めします。

v-if v-for## と一緒に使用します


v-ifv-for を同時に使用することはお勧めできません。詳細については、スタイルガイドを参照してください。

v-ifv-for とともに使用すると、v-for の方が v- よりもパフォーマンスが高くなります。 if 優先度が高くなります。詳細については、リスト レンダリング ガイドを参照してください。