v-if と v-else-if を使用して Vue で複数の条件付きレンダリングを実現する方法

Vue は非常に人気のある JavaScript フレームワークで、シングルページ アプリケーション (SPA) の構築に使用できるだけでなく、複雑なユーザー インターフェイスの作成にも使用できます。 Vue の v-if 命令と v-else-if 命令は、ビューを条件付きでレンダリングするための 2 つの重要な命令です。この記事では、これら 2 つの命令を使用して複数の条件付きレンダリングを実装する方法を紹介します。

1. v-if 命令の概要

v-if 命令は、Vue で最も一般的に使用される命令の 1 つで、要素の値に基づいて条件付きで要素をレンダリングするために使用されます。表現。式が true と評価された場合、要素はレンダリングされます。それ以外の場合、要素はレンダリングされません。

たとえば、次のコードは、数値が 10 より大きいかどうかを判断する v-if 命令の使用法を示しています。数値が 10 より大きい場合は、「10 より大きい数値」というラベルが表示されます。そうでない場合、ラベルは表示されません:

<template>
  <div>
    <p v-if="num > 10">数字大于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 20
    }
  }
}
</script>

ここでの data() メソッドは、初期値が 20 である num 属性を含むオブジェクトを返します。したがって、レンダリング時に「num > 10」という式の結果が true と判断されるため、ラベルがレンダリングされ、ラベル内のテキストは「10 より大きい数値」になります。

2. v-else-if ディレクティブの概要

v-else-if ディレクティブは、条件付きレンダリング要素にも使用されます。式の値に基づいて要素をレンダリングするかどうかを決定するには、v-if ディレクティブの「後続の兄弟要素」として使用する必要があります。前の v-if ディレクティブの式が false と評価された場合、v-else-if ディレクティブはその式が true かどうかを確認し、true の場合は要素をレンダリングします。

たとえば、次のコードは、v-if および v-else-if 命令を使用して複数の条件付きレンダリングを実装する方法を示しています。

<template>
  <div>
    <p v-if="num > 30">数字大于30</p>
    <p v-else-if="num > 20">数字大于20</p>
    <p v-else-if="num > 10">数字大于10</p>
    <p v-else>数字小于等于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 15
    }
  }
}
</script>

ここでは、数値 num が定義されており、先頭は値は 15。複数の v-if 命令と v-else-if 命令を使用して、num の値に基づいてラベルを表示するかどうかを決定します。まず、num が 30 より大きいかどうかを判断します。そうである場合は、「30 より大きい数値」というラベルを表示します。それ以外の場合は、num が 20 より大きいかどうかを判断します。20 より大きい場合は、「20 より大きい数値」というラベルを表示します。

この例では、num の値が 15 であるため、最初の 2 つの条件は満たされていませんが、3 番目の条件は満たされているため、「10 より大きい数値」というラベルが表示されます。

3. 複数の条件付きレンダリングの実装

複数の条件を判断する必要がある場合、v-if 命令と v-else-if 命令を組み合わせて使用​​して、複数の条件付きレンダリングを実現できます。次のコードは、v-if ディレクティブと v-else-if ディレクティブを使用して、さまざまな条件に基づいてさまざまな要素をレンダリングする方法を示しています:

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 75
    }
  }
}
</script>

この例では、スコアに基づいてさまざまなテキストが表示されます。 90点以上の場合「優」、80点以上の場合「良」、60点以上の場合「合格」と表示されます。 」が表示され、それ以外の場合は「失敗」が表示されます。

4. 概要

v-if 命令と v-else-if 命令は、条件付きで要素をレンダリングするために使用できる Vue の 2 つの非常に重要な命令です。一緒に使用すると、コード例のように、さまざまな条件に基づいてさまざまな要素をレンダリングできます。このアプローチにより、プログラムをより明確に編成できるようになり、メンテナンスが容易になります。

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