Vue.jsの古い書き方・新しい書き方
kurumin
プログラミングのーと
#5 Vue.js基礎（条件分岐のディレクティブ）
kurumin
基本のv-if
<script setup lang="ts">
import { computed, ref } from "vue";
const number = ref(80);
const showOrNot = computed(
(): boolean => {
let showOrNot = false;
const rand = Math.round(Math.random() * 100);
if (rand >= 50) {
showOrNot = true;
}
return showOrNot;
}
);
</script>
<template>
<p v-if="number >= 50">条件に一致したので表示①</p>
<p v-if="Math.round(Math.random() * 100) >= 50">条件に一致したので表示②</p>
<p v-if="showOrNot">条件に一致したので表示③</p>
</template>v-ifでも、テンプレートに式を直接記述する（②）のはよいコードとはいえないので、算出プロパティを記述する。（③）
else if と else
<script setup lang="ts">
import { computed } from "vue";
const randomNumber = computed(
(): number => {
return Math.round(Math.random() * 100)
}
);
</script>
<template>
<p>
点数は{{ randomNumber }}点で
<span v-if="randomNumber >= 80">優です。</span>
<span v-else-if="randomNumber >= 70">良です。</span>
<span v-else-if="randomNumber >= 60">可です。</span>
<span v-else>不可です。</span>
</p>
</template>条件ディレクティブ
v-if="条件"
…
v-else-if="条件"
…
v-else 注意点
一連の条件分岐ディレクティブを記述したタグとタグの間に、別のタグは入れられない。
以下の記述はできない。
<span v-if="randomNumber >= 80">優です。</span>
<span class="colorRed">すばらしい！</span>
<span v-else-if="randomNumber >= 60">可です。</span>ディレクティブを記述するためのタグtemplate
<div v-if="showOrNot">
<img alt="Vue logo" src="./assets/logo.svg">
<p>ロゴを表示</p>
</div>上記のようにshowOrNotがtrueのときに2つの要素を両方ともレンダリングするには、それらをまとめるタグにv-ifを記述することになるが、ディレクティブのためだけに記述するのは無意味なタグが増えることになるのでタグ階層が無駄に深くなってしまう。
この問題を避けるためにtemplateタグを使用する。
<template>
<img alt="Vue logo" src="./assets/logo.svg">
<p>ロゴを表示</p>
</template>ABOUT ME
