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

Vue は、主にインタラクティブな Web アプリケーションの構築に使用される人気のある JavaScript フレームワークです。 Vue では、v-if、v-else-if、v-else ディレクティブを使用して複数の条件付きレンダリングを実装できます。

v-if ディレクティブは、条件に基づいて DOM 要素をレンダリングするために使用されます。要素は、条件が true の場合にのみレンダリングされます。 v-else-if および v-else ディレクティブは、v-if ディレクティブで複数の条件を使用するために使用されます。

以下では、これらの命令を使用して複数の条件付きレンダリングを実現する方法を詳しく紹介します。

v-if ディレクティブの使用

v-if ディレクティブを使用するには、条件付きで判断する必要がある DOM 要素にそれを追加し、式にバインドします。

たとえば、次のような Vue コンポーネントを作成できます:

<template>
  <div>
    <p v-if="showMessage">显示消息</p>
  </div>
</template>

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

このコンポーネントでは、v-if ディレクティブを使用して、メッセージを表示するかどうかを条件付きで決定します。 showMessage 変数の値が true の場合、この要素は DOM にレンダリングされます。

showMessage 変数の値が false の場合、この要素はページ上に表示されません。

v-else-if および v-else ディレクティブを使用する

複数の条件に基づいて DOM 要素をレンダリングする必要がある場合は、v-else-if および v-else ディレクティブを使用できます。

たとえば、次のようなコンポーネントを作成できます:

<template>
  <div>
    <p v-if="size === 'small'">这是小尺寸</p>
    <p v-else-if="size === 'large'">这是大尺寸</p>
    <p v-else>这是默认尺寸</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 'small'
    };
  }
};
</script>

この例では、変数 size の値に基づいてどの要素を表示するかを決定します。 size が「small」に等しい場合は、最初の p 要素のみがレンダリングされます。「large」に等しい場合は、2 番目の p 要素のみがレンダリングされます。それ以外の場合は、3 番目の p 要素のみがレンダリングされます。

概要

Vue には便利な v-if、v-else-if、v-else 命令が用意されており、複数の条件に基づいて DOM 要素を柔軟にレンダリングできます。これらのディレクティブを使用して、強力な対話型アプリケーションを作成し、条件付きでレンダリングできます。

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