v-if と v-else を使用して Vue で条件付きコンテンツをレンダリングする方法

Vue は、アプリケーションの動的コンテンツの管理に役立つさまざまな命令を提供する、人気のあるフロントエンド開発フレームワークです。命令のうちの 2 つ、v-if と v-else は、条件に基づいてコンテンツをレンダリングするために使用されます。

v-if ディレクティブを使用すると、テンプレートにブール式を埋め込むことができ、式が true の場合にのみ、対応するコンテンツが表示されます。式が false の場合、何も表示されません。

たとえば、Vue テンプレートでは、次の方法で v-if ディレクティブを使用できます:

<div v-if="isMaster">{{ message }}</div>

上記のコードでは、isMaster 変数を通じてテキスト コンテンツの表示を制御します。 。 isMaster が true の場合、メッセージ値がページ上に表示されます。 isMaster が false の場合、div はレンダリングされません。

v-if ディレクティブに加えて、Vue は v-else ディレクティブも提供します。 v-else は v-if ディレクティブにのみ従うことができ、v-if の式が false の場合に表示されるコンテンツを指定するために使用されます。

たとえば、Vue テンプレートでは、次の方法で v-if ディレクティブと v-else ディレクティブの両方を使用できます:

<div v-if="isMaster">{{ message }}</div>
{{ errMsg }}

上記のコードでは、isMaster が true の場合、最初のディレクティブが各 div のテキスト コンテンツがレンダリングされます。 isMaster が false の場合、2 番目の div のテキスト コンテンツが表示され、最初の div は表示されません。

さらに、Vue は、複数の条件間でレンダリング コンテンツを切り替えるための v-else-if ディレクティブも提供します。

たとえば、Vue テンプレートでは、次の方法で v-if、v-else-if、および v-else ディレクティブを同時に使用できます:

<div v-if="isMaster">{{ message }}</div>
{{ teacherMsg }}
{{ errMsg }}

上記のコードでは、 if isMaster true の場合、最初の div のテキスト コンテンツがレンダリングされます。 isMaster が false で、isTeacher が true の場合、2 番目の div のテキスト コンテンツが表示されます。 isMaster と isTeacher の両方が false の場合、3 番目の div のテキスト コンテンツが表示されます。

要約すると、Vue で v-if、v-else、および v-else-if ディレクティブを使用すると、条件に基づいて特定のコンテンツをページにレンダリングするのに役立ちます。これらのディレクティブを使用すると、さまざまな環境に適応し、必要に応じて条件付きコードを追加する機能が向上します。また、これらのディレクティブを使用する場合は必ずテストして、レンダリングされた条件付きコンテンツが正しく表示されることを確認してください。

以上がv-if と v-else を使用して Vue で条件付きコンテンツをレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。