［Vue.js］v-if（分岐）
公開日：2026-02-20
更新日：2026-02-20
更新日：2026-02-20
1. 概要
v-if で表示内容を分岐します。
動作確認：Vite 7.3.1、Vue.js 3.5.25
動作確認：Vite 7.3.1、Vue.js 3.5.25
2. サンプル
2.1 コード
src/App.vue
コード
<script setup lang="ts">
import { ref } from 'vue';
const isVisible = ref(true);
const value = ref(1);
</script>
<template>
<div v-if="isVisible">
<p v-if="value == 1">1 です</p>
<p v-else-if="value == 2">2 です</p>
<p v-else-if="value == 3">3 です</p>
<p v-else>その他です</p>
</div>
<div v-else>非表示中</div>
</template>2.2 説明
v-if を指定した要素は、式が true の時に出力されます。
v-else は、式が false の時に出力されます。
また、v-else は v-if と同じ階層の次の要素に書く必要があります。
v-else は、式が false の時に出力されます。
また、v-else は v-if と同じ階層の次の要素に書く必要があります。
