【Vue.js】条件分岐v-if と 否定演算子（!）の理解

v-ifとは

v-if は条件によって要素を表示・非表示にするディレクティブ

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

awesome が

• true → 「Vue is awesome!」を表示
• false → 「Oh no 😢」を表示

となります。
v-if は boolean（真偽値） を見て表示を切り替えています。

---

今回使用したコード

vue公式チュートリアルを参考にしています。

<script setup>
import { ref } from 'vue'

const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">Toggle</button>

  <h1 v-if="awesome">
    Vue is awesome!
  </h1>

  <h1 v-else>
    Oh no 😢
  </h1>
</template>

最初は

const awesome = ref(true);

trueが入っているので

awesome = true

Vue is awesome!

が表示されます。

---

否定演算子（!）とは

! は現在の真偽値を反転させる演算子

!true
// false

!false
// true

イメージとしてはスイッチのON・OFFです。

ON(true)
 ↓ !
OFF(false)
 ↓ !
ON(true)

今回のコードでは

awesome.value = !awesome.value;

これは
現在の awesome の値を取得して、その反対の値を代入するという意味

ボタンを押すたびに反転する理由

最初は

awesome = true

1回目

awesome.value = !awesome.value;

↓

!true

↓

false

となるので

awesome = false

2回目

今度は

awesome = false

なので

!false

↓

true

3回目

true
↓
false
↓
true
↓
false

ボタンを押すたびに現在の値を取得して反転しているため、表示が切り替わります。

「falseになったら終わりじゃないの？」

最初は

一度 false が代入されたら、そのままでは？

と思いました。

しかし

<button @click="toggle">

によって、

クリックするたびに toggle() が実行されています。

つまり毎回

awesome.value = !awesome.value;

が評価されるため、

クリック

↓

現在の awesome.value を取得

↓

反転する

↓

新しい値を代入

という処理を繰り返しています。

そのため、一度 false になっても、次にクリックすると true に戻ります。

true / false 以外にも使える

今回のコードでは boolean 型を扱っていますが、! はそれ以外の値にも使用できます。

JavaScriptでは、一度値を真偽値として判定してから反転します。

値	判定	! の結果
"Hello"	true	false
1	true	false
0	false	true
""	false	true
null	false	true

例えば

!"Hello"
// false

!0
// true

となります。

まとめ

• v-if は boolean の値によって表示・非表示を切り替える
• v-else を使うことで条件に応じた表示を切り替えられる
• ! は真偽値を反転させる否定演算子
• awesome.value = !awesome.value は
  「現在の値を反転して代入する」という意味
• @click によって toggle() が毎回実行されるため、
  ボタンを押すたびに true と false が切り替わる
• ! は boolean だけでなく、文字列や数値などにも利用できる