Vueの条件付きレンダリングの秘密兵器：v-if、v-show、v-else、v-else-ifの使い方と効果比較を詳しく解説

#Vue 条件付きレンダリングの秘密兵器: v-if、v-show、v-else、v-else-if の使い方と効果の比較を詳しく解説

Vue as ビューの表示と非表示を制御するための豊富なツールと手順を提供する人気のあるフロントエンド フレームワーク。 Vue では、条件付きレンダリングは、さまざまな条件に基づいて要素を表示するか非表示にするかを決定するために使用される一般的な操作です。この記事では、Vue の条件付きレンダリング命令 (v-if、v-show、v-else、v-else-if) について詳しく説明し、それらの使用法と効果を比較します。同時に、読者がこれらの手順の適用シナリオをよりよく理解できるように、具体的なコード例を提供します。

v-if ディレクティブ
1. v-if ディレクティブは、Vue で最も一般的に使用される条件付きレンダリング ディレクティブの 1 つです。指定された条件に基づいて要素をレンダリングするかどうかを決定します。条件が true の場合、要素は DOM にレンダリングされ、それ以外の場合は DOM から削除されます。 v-if 命令は切り替えオーバーヘッドが高く、条件が変化すると要素が再作成または破壊されます。
   

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

<template>
  <div>
    <p v-if="isShow">这是一个使用v-if指令的示例</p>
  </div>
</template>

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

上の例では、isShow が true の場合、段落要素が DOM にレンダリングされます。 isShow false の場合、段落要素は DOM から削除されます。

v-show 命令
2. v-show 命令は v-if 命令に似ており、どちらも条件付きレンダリングに使用されますが、この 2 つの間にはいくつかの違いがあります。 v-show 命令は、要素の CSS 表示属性を変更することで要素の表示と非表示を制御します。条件が true の場合、要素は表示され、条件が false の場合、要素は非表示になります。 v-if とは異なり、v-show 命令は切り替えのオーバーヘッドが少なく、要素の表示属性を変更するだけで、実際に要素を作成したり破棄したりすることはありません。
   

次は v-show ディレクティブの使用例です:

<template>
  <div>
    <p v-show="isShow">这是一个使用v-show指令的示例</p>
  </div>
</template>

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

上の例では、isShow が true の場合は段落要素が表示され、isShow が false の場合は段落要素が表示されます。 , 段落要素が非表示になります。

v-else コマンド
3. v-else コマンドは、v-if または v-show コマンドと組み合わせて使用​​されます。これは、現在の要素が前の要素の「否定」であることを意味します。 v-else ディレクティブは v-if または v-show ディレクティブの後に続く必要があり、パラメーターや式を含めることはできません。
   

次に、 v-else ディレクティブの使用例を示します。

<template>
  <div>
    <p v-if="isShow">这是一个使用v-if指令的示例</p>
    <p v-else>这是一个使用v-else指令的示例</p>
  </div>
</template>

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

上の例では、 isShow が true の場合、最初の段落要素が DOM にレンダリングされます。 isShow が false の場合、2 番目の段落要素が DOM にレンダリングされます。

v-else-if コマンド
4. v-else-if コマンドは、v-if または v-show コマンドと組み合わせて使用​​されます。それは、現在の要素が「前の要素の否定と別の条件の肯定」であることを意味します。 v-else-if ディレクティブは、v-if または v-show ディレクティブの後に続く必要があり、1 つのパラメーターまたは式を含めることができます。
   

次に、v-else-if ディレクティブの使用例を示します。

<template>
  <div>
    <p v-if="type === 'A'">这是类型A的示例</p>
    <p v-else-if="type === 'B'">这是类型B的示例</p>
    <p v-else>这是其他类型的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'A',
    };
  },
};
</script>

上の例では、type のさまざまな値に応じて、さまざまな段落要素が使用されます。 DOM にレンダリングされます。 type が 'A' の場合は最初の段落要素が表示され、type が 'B' の場合は 2 番目の段落要素が表示され、type がその他の値の場合は 3 番目の段落要素が表示されます。

要約すると、v-if、v-show、v-else、v-else-if は、Vue で一般的に使用される条件付きレンダリング命令です。それぞれに独自の利点と適用可能なシナリオがあります。要素の表示と非表示を頻繁に切り替える必要があり、レンダリングのオーバーヘッドが比較的小さい場合は、v-show 命令を使用できます。さまざまな条件に基づいて要素を動的に作成または破棄する必要がある場合、または切り替えのオーバーヘッドが大きい場合は、v-show 命令を使用できます。 、 v-if 命令を使用できます。 if 複数の条件に基づいてさまざまな要素をレンダリングする必要がある場合は、 v-else-if ディレクティブを使用できます。 v-if の条件が満たされたときにいくつかのデフォルト要素をレンダリングする必要がある場合は、 v-if 命令を使用できます。または v-show ディレクティブが満たされていない場合は、v-else ディレクティブを使用できます。

この記事の紹介を通じて、読者が Vue の条件付きレンダリング命令をよりよく理解して適用できるようになり、特定のニーズに応じてビューの表示と非表示を制御する適切な命令を選択できるようになることを願っています。

以上がVueの条件付きレンダリングの秘密兵器：v-if、v-show、v-else、v-else-ifの使い方と効果比較を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。