Vue v-if,v-else,v-else-if使用法

今回からは条件付きレンダリングとリストレンダリングの解説をしていきます。

レンダリングをさせたりさせなかったり、条件をつけて切り替える方法ですが、例えば下記のようにOKがtrueであれば<P>でOKを表示させたいとします。
ボタンに @click="ok = !ok"を付けて<P>にv-if="ok"を付ければボタンのクリックでOK!がついたり消えたりという、JavaScriptのif文のような動きが簡単に作れます。

<script setup>
import { ref } from 'vue'
const ok = ref(true)
</script>

<template>
  <button @click="ok = !ok">toggle</button>
  <p v-if="ok">OK!</p>
</template>

もちろん、elseもあります。
v-elseの方は値を入れずに使用します。

<script setup>
import { ref } from 'vue'
const ok = ref(true)
</script>

<template>
  <button @click="ok = !ok">toggle</button>
  <p v-if="ok">OK!</p>
  <p v-else>NO!</p>
</template>

これでボタンを押すとOK!とNO!のレンダリングが切り替えできるようになります。
で、v-elseがあるということはもちろんv-else-ifもあります。
下記のようにv-else-ifは別の条件式が必要になります。

<script setup>
import { ref } from 'vue'
const ok = ref(true)
const maybeOk = ref(true)
</script>

<template>
  <button @click="ok = !ok">toggle</button>
  <p v-if="ok">OK!</p>
  <p v-else-if="maybeOk">maybe OK!</p>
  <p v-else>NO!</p>
</template>

こうするとボタンを押すとOK!とmaybe OK!の切り替えができて、
const maybeOk = ref(false)にするとNO!になります。
で、v-else-ifは条件式を作ればいくつあっても大丈夫です。
注意点ですがv-elseやv-else-ifは必ずv-if、v-else-ifの後に書く必要があります。

<p v-if="ok">OK!</p>
  <p v-else-if="maybeOk">maybe OK!</p>
  <p v-else>NO!</p>

この間に他のタグなど入れようとするとエラーが発生します。
ただし要素は違うものでもOKなので今回は<p>タグですが、途中で<div>でも何でも大丈夫です。

では次にv-ifディレクティブを使って複数の要素を一気に表示させたり消したりするにはどうしたらいいか？
これは同じように <p v-if="ok">OK!</p>を増やして値を変えればいいです。

<script setup>
import { ref } from 'vue'
const ok = ref(true)
</script>

<template>
  <button @click="ok = !ok">toggle</button>
  <p v-if="ok">OK!</p>
  <p v-if="ok">Hello!</p>
  <p v-if="ok">Nyan!</p>
  <p v-if="ok">Nyan Nyan!</p>
</template>

でも、これだと毎回v-ifを書かないといけないので面倒です。
方法はいろいろありますが、まずは<div>タグで括って<div>タグにv-if=""をつけると一気に消えたり付けたりできます。

<script setup>
import { ref } from 'vue'
const ok = ref(true)
</script>

<template>
  <button @click="ok = !ok">toggle</button>
  <div v-if="ok">
    <p>OK!</p>
    <p>Hello!</p>
    <p>Nyan!</p>
    <p>Nyan Nyan!</p>
  </div>
</template>

これでもいいのですが、問題点は複数の要素条件をつけてレンダリングしたいだけなのに無駄に<div>タグが増えてしまうということですね。
これに対して解決策は<template>タグを使用します。
実は外側の<template>タグの内部でも<template>タグは使用することができて、これを使って書くと最終的に存在しないタグとして消してくれます。

<script setup>
import { ref } from 'vue'
const ok = ref(true)
</script>

<template>
  <button @click="ok = !ok">toggle</button>
  <template v-if="ok">
    <p>OK!</p>
    <p>Hello!</p>
    <p>Nyan!</p>
    <p>Nyan Nyan!</p>
  </template>
</template>

これでももちろんON.Offできますし、検証ツールで見ると<button>タグの下の<template>タグは消えています。
（<div>タグだと要素が現れます。）

この<template>タグはv-ifと使わずに単体で使用すると残ってしまうので必ずv-ifとセットで使用しましょう。

次回はv-ifに似たv-showの解説をしていきます。