Vue — v-if / v-show

テクノロジ系／ L01 template-syntax — テンプレート構文

Vue — v-if / v-show

v-if — DOM を作る/作らない

<script setup>
const isLoggedIn = ref(false);
</script>

<template>
  <p v-if="isLoggedIn">Welcome</p>
  <p v-else>Please login</p>
</template>

v-if が false → DOM 自体が無い
v-else-if / v-else も使える

複数兄弟 + template ラッパー

<template>
  <template v-if="user">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </template>
</template>

<template v-if="..."> は DOM に出ない仮想ラッパー。

React の <Fragment> に相当。

v-show — display:none で切り替え

<template>
  <p v-show="isVisible">Visible</p>
</template>

DOM は 常に存在、CSS の display: none で切り替え
v-else 系は使えない

v-if vs v-show

v-if	v-show
DOM	動的	常に存在
切替コスト	高	低
初期コスト	低 (false なら作らない)	高 (必ず作る)
`v-else`	✅	❌
`<template>`	✅	❌

→ 頻繁に切り替える = v-show、滅多に切り替えない or 重い = v-if。

v-if と v-for は同じ要素で混ぜない

<!-- ❌ Vue 3 ではエラー -->
<li v-for="item in items" v-if="item.active" :key="item.id">
  {{ item.name }}
</li>

<!-- ✅ template でラップ -->
<template v-for="item in items" :key="item.id">
  <li v-if="item.active">{{ item.name }}</li>
</template>

<!-- ✅ または computed で絞り込み -->
<li v-for="item in activeItems" :key="item.id">
  {{ item.name }}
</li>

computed で絞るのが一番きれい。

まとめ

v-if / v-else-if / v-else — DOM 動的
v-show — display 切替 (常に存在)
頻繁切替 → v-show、稀 → v-if
<template v-if> で複数兄弟をラップ
v-if と v-for は同要素で混ぜない (computed で絞るのが推奨)

最後は v-model (双方向)。

考えてみよう

既定では正解・不正解の判定はしません。自分のペースで「答えを見る」を。採点してほしい場合だけ「採点してほしい」を押してください。

Lv1: 基本 — v-if と v-else

問題

<script setup>
const isLoggedIn = ref(false);
</script>

<template>
  <p v-if="isLoggedIn">Welcome</p>
  <p v-else>Please login</p>
  <button @click="isLoggedIn = !isLoggedIn">Toggle</button>
</template>

DevTools で v-if 切り替え時に DOM 自体が出現/消失 することを確認。

合格基準

DOM の出入り
v-else が動く

Lv2: 応用 — v-if vs v-show

問題

<script setup>
const showA = ref(false);
const showB = ref(false);
</script>

<template>
  <p v-if="showA">v-if</p>
  <p v-show="showB">v-show</p>
  <button @click="showA = !showA">Toggle A</button>
  <button @click="showB = !showB">Toggle B</button>
</template>

DevTools で:

v-if: 切り替え時に DOM が 追加/削除
v-show: DOM は常に存在、style="display: none" で切替

を観察。

合格基準

2つの差を確認
頻繁切替 → v-show、稀 → v-if の使い分け

Lv3: 発展 — v-if と v-for の同時使用禁止

問題

以下が Vue 3 ではエラー になる。

<!-- ❌ -->
<li v-for="item in items" v-if="item.active" :key="item.id">{{ item.name }}</li>

3通りの修正法:

<!-- (1) template でラップ -->
<template v-for="item in items" :key="item.id">
  <li v-if="item.active">{{ item.name }}</li>
</template>

<!-- (2) computed で絞る -->
<li v-for="item in activeItems" :key="item.id">{{ item.name }}</li>

<!-- (3) filter で絞る (template内式) -->
<li v-for="item in items.filter(x => x.active)" :key="item.id">{{ item.name }}</li>

どれが推奨か (computed 派) を 100字で。

合格基準

3パターン書ける
推奨パターンを選べる

提出

submission.md に3問の回答を。