v-else-if 条件分岐（else if）
最終更新：2026-10-22
v-else-if 条件分岐（else if）
v-else-if は複数の条件分岐をつなぎ、真になる条件が見つかるまで順に評価します。
| グループ | ディレクティブ |
|---|---|
| 種類 | ディレクティブ |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
<p v-if="t >= 90">優秀</p>
<p v-else-if="t >= 60">合格</p>
<p v-else>不合格</p>⚙️ 引数
| expression | 真偽値を返す式。記述順に短絡評価されます |
|---|
戻り値：ディレクティブ。戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Enter 75 for 'Pass', 95 for 'Excellent', 40 for 'Fail'.💡 ポイント
ℹ️ 補足 条件は記述順に評価され、最初に一致した時点で止まります。最も厳しい条件を先頭に並べてください。
⚠️ 注意 こちらも v-if / v-else-if の直後に置く必要があり、チェーンを他の要素で中断できません。
💡 ヒント 分岐が 3 つを超える場合は、算出プロパティでステータスを返す方を検討してください。テンプレートがすっきりします。
🏷️ 関連ディレクティブ
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q v-else-if の評価順序は重要ですか？
A 重要です。上から下へ短絡評価され、一致した時点で止まるため、最も厳しい条件を先頭に置きます。
Q 分岐が多いとテンプレートが散らかりますか？
A 3 つを超えるなら、ステータスを算出プロパティにまとめ、テンプレートではその値だけを判断します。
Q v-else-if は v-show と混在できますか？
A できません。分岐チェーンは v-if 系のディレクティブ間でのみペアリングされます。
