v-else 条件分岐（else）
最終更新：2026-10-22
v-else 条件分岐（else）
v-else は v-if に対する「それ以外」の分岐を提供します。v-if が偽のときにレンダリングされ、式は取りません。
| グループ | ディレクティブ |
|---|---|
| 種類 | ディレクティブ |
| スコープ | テンプレート |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
<p v-if="loggedIn">ようこそ</p>
<p v-else>ログインしてください</p>⚙️ 引数
| expression | 式なし |
|---|
戻り値：ディレクティブ。戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The page shows 'Pass'; change score to 50 to see 'Fail'.💡 ポイント
⚠️ 注意 v-else は v-if / v-else-if 要素の直後に置く必要があります。間に他の要素やコメントを挟めません。
💡 ヒント 複数の分岐は v-else-if でつなぎ、最後に 1 つの v-else で締めくくります。
ℹ️ 補足 v-else 要素と v-if 要素は隣接する兄弟ノードである必要があります。
🏷️ 関連ディレクティブ
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q v-else は v-if の直後に置く必要がありますか？
A はい。間に他の要素やコメントが入ると、Vue は分岐をペアリングできません。
Q 複数の v-else を書けますか？
A いいえ。1 つの分岐チェーンに v-else は 1 つだけで、必ず最後に置きます。中間の条件には v-else-if を使います。
Q v-else には式が必要ですか？
A 必要ありません。直前の分岐が偽のときにそのままレンダリングされます。
