Vueでの複雑な条件分岐
ディレクティブ v-if では、
より複雑な条件を記述できます。例えば、
プロパティ num に
数値 1、 2、または
3 のいずれかが格納されている場合を考えてみましょう:
data() {
return {
num: 3, // ここでは3が入っているとします
}
}
では、プロパティ num の値に応じて、
3つの段落のうち1つだけが表示されるように
してみましょう:
<template>
<p v-if="num === 1">one</p>
<p v-if="num === 2">two</p>
<p v-if="num === 3">three</p>
</template>
さらに複雑な条件を設定することも可能です:
<template>
<p v-if="num === 1 || num === 3">
one or two
</p>
</template>
プロパティ day に現在の曜日が
格納されているとします。また、それぞれに曜日名が
書かれた7つの段落があるとします。
画面上には、現在の曜日名を含む段落だけが
表示されるようにしてください。