Vueベース(条件レンダリング)

v-if(1)文字列テンプレート、例えばHandlebarsでは、このように条件ブロックを書かなければなりません.

{{#if ok}}
  <h1>Yesh1>
{{/if}}

Vueでは、v-if命令を使用して同じ機能を実現します.

<h1 v-if="ok">Yesh1>

v-elseで「elseブロック」を追加することもできます.

<h1 v-if="ok">Yesh1>
<h1 v-else>Noh1>

要素にv-if条件を使用してパケットをレンダリングするには、v-ifはコマンドであるため、要素に追加する必要があります.しかし、複数の要素を切り替えたい場合は?この場合、1つの要素を非表示のラップ要素として使用し、v-ifを使用することができます.最終的なレンダリング結果は含まれません

<template>   。
<template v-if="ok">
  <h1>Titleh1>
  <p>Paragraph 1p>
  <p>Paragraph 2p>
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 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>Usernamelabel>
  <input placeholder="Enter your username">
template>
<template v-else>
  <label>Emaillabel>
  <input placeholder="Enter your email address">
template>

では、上記のコードでloginTypeを切り替えると、ユーザーが入力した内容は消去されません.2つのテンプレートは同じ要素を使用しているので、置き換えられません.placeholderを置き換えただけです.
これは必ずしも実際のニーズに合致しないため、Vueは「この2つの要素は完全に独立しており、多重化しないでください」と表現する方法を提供しています.一意の値を持つkeyプロパティを追加するだけです.

<template v-if="loginType === 'username'">
  <label>Usernamelabel>
  <input placeholder="Enter your username" key="username-input">
template>
<template v-else>
  <label>Emaillabel>
  <input placeholder="Enter your email address" key="email-input">
template>

キー属性が追加されていないため、要素は効率的に多重化されます.
v-showもう1つの条件に従って要素を表示するためのオプションは、v-showコマンドです.使い方は大体同じです.

<h1 v-show="ok">Hello!h1>

異なる点は、v-show付き要素は常にレンダリングされ、DOMに保持されます.v-showは要素のCSS属性displayを簡単に切り替えるだけです.
v-showは要素もelseもサポートしていません
v-if vs v-show
v-ifは、切替中に条件ブロック内のイベントリスナーとサブコンポーネントが適切に破棄され、再構築されることを保証するため、「真」の条件レンダリングです.
v-ifも不活性です.初期レンダリング時に条件が偽の場合、条件が初めて真になるまで条件ブロックのレンダリングが開始されません.
それに比べて、v-showはずっと簡単です.初期条件が何であれ、要素は常にレンダリングされ、CSSに基づいて簡単に切り替えるだけです.
一般に、v-ifはより高いスイッチングオーバーヘッドを有し、v-showはより高い初期レンダリングオーバーヘッドを有する.したがって、非常に頻繁に切り替える必要がある場合は、v-showを用いるのが好ましい.実行時に条件が変更されない場合は、v-ifを使用するとよい.
v−ifは、v−forと共に使用され、v−ifがv−forと共に使用される場合、v−forはv−ifよりも高い優先度を有する.