v-if を使用して Vue で要素を表示するか非表示にするかを決定する方法

Vue フレームワークでは、v-if は一般的に使用される命令で、式の値に基づいて要素を表示するか非表示にするかを決定するために使用されます。ここではv-if命令の使い方を詳しく紹介します。

1. 基本構文

v-if 命令の基本構文は次のとおりです:

<div v-if="expression">内容</div>

このうち、expression は JavaScript 式です。 true の場合、現在の要素を表示します。false の場合、DOM から現在の要素を削除します。

2. 例

次に、v-if ディレクティブを使用した簡単な例を示します。

<div id="app">
  <p v-if="isShow">这是要显示的内容</p>
</div>

isShow 属性が、 data 段落コンテンツを表示するかどうか。この値はブール値です。 isShow が true の場合、段落の内容が表示されます。それ以外の場合、段落の内容は表示されません。したがって、Vue では、isShow の値を変更するだけでコンテンツの表示を切り替えることができます。

3. v-if と v-else の使用

v-if に加えて、Vue は v-if を実行するときに使用される v-else ディレクティブも提供します。式が false の場合に要素を表示します。 v-else を使用するには、以下に示すように、v-if と同じ DOM 要素に配置する必要があります。

<div id="app">
  <p v-if="isShow">这是要显示的内容</p>
  <p v-else>这是要隐藏的内容</p>
</div>

この例では、isShow が true の場合、最初の段落のコンテンツのみが表示されます。 if isShow が false の場合、2 番目の段落のみが表示されます。

4. v-if および v-else-if の使用

Vue には、v-if と v-else の間で使用される v-else-if 命令も用意されています。間に条件を挿入します。以下に示すように、v-else-if も v-if と同じ DOM 要素に配置する必要があります。

<div id="app">
  <p v-if="score >= 90">A级</p>
  <p v-else-if="score >= 80">B级</p>
  <p v-else-if="score >= 70">C级</p>
  <p v-else-if="score >= 60">D级</p>
  <p v-else>不及格</p>
</div>

この例では、グレードに応じて異なる段落コンテンツが表示されます。

5. 概要

この記事では、式の値に基づいて要素を表示するか非表示にするかを決定する、Vue の v-if ディレクティブの使用方法を紹介します。必要に応じて v-if、v-else、または v-else-if を使用して、どの要素を表示するかを決定することで、より豊かなページ インタラクション効果を実現できます。

以上がv-if を使用して Vue で要素を表示するか非表示にするかを決定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。