Vue の条件付きレンダリング スキルが明らかに: v-if、v-show、v-else、v-else-if を使用して柔軟な制御を実現する方法を学ぶ

Vue の条件付きレンダリング スキルを明らかにします。柔軟な制御を実現するには、v-if、v-show、v-else、v-else-if の使用方法を学びます。具体的なコード例が必要です

Vue では、条件付きレンダリングは非常に重要な技術であり、特定の条件に基づいてコンポーネントや要素の表示と非表示を制御できます。 Vue は、v-if、v-show、v-else、v-else-if などのさまざまな条件付きレンダリング命令を提供します。この記事では、これらの命令の使用法を詳しく説明し、具体的なコード例を示します。

1. v-if ディレクティブ
   v-if ディレクティブは、式の値に基づいて特定のコンポーネントまたは要素をレンダリングするかどうかを決定できます。式の値が true の場合、対応するコンテンツが表示されます。式の値が false の場合、対応するコンテンツは表示されません。以下は例です:

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

この例では、v-if ディレクティブを使用して、showHeading の値に基づいてタイトルを表示するかどうかを決定します。 showHeading の値が true の場合、タイトルが表示されます。showHeading の値が false の場合、非表示のタイトルを持つ段落が表示されます。

2. v-show ディレクティブ
   v-show ディレクティブには、v-if ディレクティブと同様の機能があり、コンポーネントまたは要素の表示と非表示を、表現。 v-if とは異なり、v-show は条件に基づいて DOM 要素を追加または削除しませんが、CSS スタイルを通じて要素の表示と非表示を制御します。以下は例です:

<template>
  <div>
    <h1 v-show="showHeading">显示标题</h1>
    <p v-show="!showHeading">隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

この例では、v-show ディレクティブを使用して、showHeading の値に基づいてタイトルの表示と非表示を制御します。 v-if と比較すると、v-show のロジックは CSS スタイルを通じて要素の表示と非表示を制御するだけであるため、より単純です。

3. v-else ディレクティブ
   v-else ディレクティブは、v-if または v-show ディレクティブの逆の条件を表現するために、v-if または v-show ディレクティブと一緒に使用する必要があります。 。以下は例です:

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

この例では、showHeading の値が true の場合、タイトルが表示された要素がレンダリングされ、showHeading の値が false の場合、段落がレンダリングされます。非表示のタイトルが表示されます。 が表示されます。

4. v-else-if ディレクティブ
   v-else-if ディレクティブは、複数の条件の判断を表現するために、v-if または v-show ディレクティブと併用する必要があります。これを使用して、複数の v-else if ステートメントを置き換えることができます。以下は例です:

<template>
  <div>
    <h1 v-if="rating >= 9">优秀</h1>
    <h2 v-else-if="rating >= 6">良好</h2>
    <h3 v-else-if="rating >= 3">及格</h3>
    <h4 v-else>不及格</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 8
    };
  }
};
</script>

この例では、評価の値に基づいて、v-if および v-else-if 命令を使用して評価レベルを決定し、それに応じてさまざまなタイトルを表示します。 . .評価値が 9 以上の場合は優れたタイトルが表示され、評価値が 6 以上の場合は良好なタイトルが表示され、評価値が 3 以上の場合は優れたタイトルが表示されます。合格したタイトルがレンダリングされます。評価値が 3 以上の場合、合格したタイトルがレンダリングされます。値が 3 未満の場合、不適格なタイトルがレンダリングされます。

要約:
v-if、v-show、v-else、v-else-if などの条件付きレンダリング命令を学習して使用することにより、コンポーネントや要素の表示を以下に基づいて柔軟に制御できます。条件と非表示。特定のビジネス ニーズに応じて、適切な命令を選択して条件付きレンダリングを実装すると、コードがより簡潔で読みやすくなります。この記事で提供されているコード例が、Vue の条件付きレンダリング技術をよりよく理解し、使用するのに役立つことを願っています。

以上がVue の条件付きレンダリング スキルが明らかに: v-if、v-show、v-else、v-else-if を使用して柔軟な制御を実現する方法を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。