kazuki.m

Appearance

sumnail

Vue3の条件分岐

created at : 2024/08/23

Vue3

Vue の条件分岐とは？ ​

条件分岐を使うと値に応じて表示を切り替えることができます。

条件分岐は、v-if、v-else、v-else-if、v-show などのディレクティブを使用します。

使用例 ​

実際に条件分岐を使った例を紹介します。

v-if ​

v-if ディレクティブを使って、条件に応じて表示を切り替える例です。

sample

Hello!

ソースコードを見る
vue
<template>
  <button @click="flag = !flag">{{ flag ? "Turn Out" : "Turn On" }}</button>
  <div v-if="flag">
    <p>Hello!</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const flag = ref(true);
</script>

<style scoped>
button {
  margin: 8px;
  padding: 4px 12px;
  font-size: 16px;
  background-color: var(--main-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

p {
  font-size: 24px;
  color: var(--main-color);
  padding: 8px;
}
</style>

v-else ​

v-else ディレクティブを使って、条件に応じて表示を切り替える例です。

sample

ON

ソースコードを見る
vue
<template>
  <button @click="flag = !flag">{{ flag ? "Turn Out" : "Turn On" }}</button>
  <div v-if="flag">
    <p>ON</p>
  </div>
  <div v-else>
    <p>OFF</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const flag = ref(true);
</script>

<style scoped>
button {
  margin: 8px;
  padding: 4px 12px;
  font-size: 16px;
  background-color: var(--main-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

p {
  font-size: 24px;
  color: var(--main-color);
  padding: 8px;
}
</style>

TIP

v-else ディレクティブは、直前の v-if ディレクティブが false の場合に表示されます。

v-else-if ​

v-else-if ディレクティブを使って、条件に応じて表示を切り替える例です。

サイコロ 3 つの目に応じて、結果を表示します。

sample

1,

1,

1

ピンゾロ

ソースコードを見る
vue
<template>
  <div class="dice">
    <p>{{ dice1 }},</p>
    <p>{{ dice2 }},</p>
    <p>{{ dice3 }}</p>
  </div>
  <button @click="handleClick">{{ "dice" }}</button>
  <div v-if="isPinzoro">
    <p>ピンゾロ</p>
  </div>
  <div v-else-if="isZorome">
    <p>ゾロ目</p>
  </div>
  <div v-else-if="isZigoro">
    <p>ジゴロ</p>
  </div>
  <div v-else-if="isYakuari">
    <p>役あり</p>
  </div>
  <div v-else-if="isHifumi">
    <p>ヒフミ</p>
  </div>
  <div v-else>
    <p>役なし</p>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const dice1 = ref(1);
const dice2 = ref(1);
const dice3 = ref(1);

const handleClick = () => {
  dice1.value = Math.floor(Math.random() * 6) + 1;
  dice2.value = Math.floor(Math.random() * 6) + 1;
  dice3.value = Math.floor(Math.random() * 6) + 1;
};

const isPinzoro = computed(() => {
  return dice1.value === 1 && dice2.value === 1 && dice3.value === 1;
});

const isZorome = computed(() => {
  return dice1.value === dice2.value && dice1.value === dice3.value;
});

const isZigoro = computed(() => {
  return (
    Math.min(dice1.value, dice2.value, dice3.value) === 4 &&
    dice1.value + dice2.value + dice3.value === 15
  );
});

const isYakuari = computed(() => {
  return (
    dice1.value === dice2.value ||
    dice1.value === dice3.value ||
    dice2.value === dice3.value
  );
});

const isHifumi = computed(() => {
  return (
    Math.max(dice1.value, dice2.value, dice3.value) === 3 &&
    dice1.value + dice2.value + dice3.value === 6
  );
});
</script>

<style scoped>
button {
  margin: 8px;
  padding: 4px 12px;
  font-size: 16px;
  background-color: var(--main-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

p {
  font-size: 24px;
  color: var(--main-color);
  padding: 8px;
}

.dice {
  display: flex;
  justify-content: start;
  align-items: center;
}
</style>

TIP

v-else-if ディレクティブは、直前の v-if ディレクティブが false かつv-else-ifがtrueの場合に表示されます。

v-show ​

v-show ディレクティブを使って、条件に応じて表示を切り替える例です。

sample

ソースコードを見る
vue
<template>
  <div>
    <button @click="handleRoll">Dice Roll</button>
    <button v-show="isShow" @click="handleClear">Clear</button>
  </div>
  <p v-for="item in items" :key="item">{{ item }}</p>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const items = ref<number[]>([]);

const isShow = computed(() => {
  return items.value.length > 0;
});

const handleRoll = () => {
  items.value.push(Math.floor(Math.random() * 6) + 1);
};

const handleClear = () => {
  items.value = [];
};
</script>

<style scoped>
div {
  display: flex;
}

button {
  margin: 8px;
  padding: 4px 12px;
  font-size: 16px;
  background-color: var(--main-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
</style>

条件分岐 v-if と v-show の違い

v-if は条件が false の場合、DOM から削除されます。

v-show は条件が false の場合、display: none が適用されます。

v-if と v-show の使い分けは、条件が頻繁に変わる場合は v-show、条件が頻繁に変わらない場合は v-if を検討すると良いでしょう。

まとめ ​

Vue3 では、v-if、v-else、v-else-if、v-show などの条件分岐を使って、表示を制御することができます。

参考 ​