Vue で v-if と v-else を組み合わせてデュアル条件付きレンダリングを実現する方法

Vue は優れたフロントエンド フレームワークであり、学習が簡単で、効率的で、柔軟性があり、スケーラブルであるため、フロントエンド開発者に広く愛されています。 Vue では、v-if と v-else がよく使用される 2 つの命令であり、さまざまな条件下でさまざまなコンテンツをレンダリングするのに役立ちます。この記事では、v-if と v-else を使用して Vue でデュアル条件付きレンダリングを実現する方法を紹介します。

1. v-if と v-else

Vue では、v-if は条件判定を行う命令であり、与えられた条件に基づいて特定のオブジェクトを描画するかどうかを決定することができます。例:

<div v-if="isShow">这是一个显示区域</div>

isShow が true の場合、この div はレンダリングされ、isShow が false の場合、この div は DOM から削除されます。

v-else は v-if の補足命令で、v-if の条件が false の場合に別の要素をレンダリングするために使用されます。例:

<div v-if="isShow">这是一个显示区域</div>
这是一个隐藏区域

isShow が true の場合、最初の div はレンダリングされ、2 番目の div は非表示になります。isShow が false の場合、最初の div は非表示になり、2 番目の div は非表示になります。 divがレンダリングされます。

2. v-if と v-else を使用してデュアル条件付きレンダリングを実装します。

場合によっては、2 つの条件に基づいて異なるコンテンツをレンダリングする必要がある場合、v-if と v を組み合わせて使用​​できます。 -それ以外の場合は、二重条件付きレンダリングが実現されます。例: ユーザーの性別と年齢に基づいて異なるコンテンツをレンダリングする必要があります。ユーザーが男性で 30 歳以上の場合、「あなたは中年に突入しました」とレンダリングされ、それ以外の場合は「あなたはまだ若いです」とレンダリングされます。

まず、Vue インスタンスで 2 つの変数、性別と年齢を定義する必要があります。これら 2 つの変数はそれぞれユーザーの性別と年齢を表します。

data() {
  return {
    gender: 'male',
    age: 25
  }
}

次に、これをテンプレートに記述できます:

<div v-if="gender === 'male' && age > 30">您已经步入中年</div>
<div v-else>您还年轻</div>

性別が男性で年齢が 30 を超える場合は、最初の div がレンダリングされます。それ以外の場合は、2 番目の div がレンダリングされます。外。

3. 概要

v-if を v-else と組み合わせて使用​​すると、二重条件付きレンダリングを簡単に実現できます。実際の開発では、ニーズに応じて Vue 命令を合理的に使用して、さまざまなニーズを実現できます。同時に、命令の使用法やパフォーマンスの問題にも注意を払い、コードを合理的に最適化し、ページのパフォーマンスとユーザー エクスペリエンスを向上させる必要もあります。

以上がVue で v-if と v-else を組み合わせてデュアル条件付きレンダリングを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。