Vue.jsにおける条件分岐の方法

1. v-ifディレクティブを使用した単純な条件分岐:

<template>
  <div>
    <p v-if="condition">条件が真の場合に表示されるコンテンツ</p>
  </div>
</template>

2. v-else-ifとv-elseディレクティブを使用した条件分岐のチェーン:

<template>
  <div>
    <p v-if="condition1">条件1が真の場合に表示されるコンテンツ</p>
    <p v-else-if="condition2">条件2が真の場合に表示されるコンテンツ</p>
    <p v-else>どの条件も偽の場合に表示されるコンテンツ</p>
  </div>
</template>

3. コンポーネント内での条件分岐:

<template>
  <div>
    <component-a v-if="condition"></component-a>
    <component-b v-else></component-b>
  </div>
</template>

4. 複数の条件を組み合わせた条件分岐:

<template>
  <div>
    <p v-if="condition1 && condition2">条件1と条件2が真の場合に表示されるコンテンツ</p>
  </div>
</template>