Vueでの複雑な条件分岐

ディレクティブ v-if では、 より複雑な条件を記述できます。例えば、 プロパティ num に 数値 1、 2、または 3 のいずれかが格納されている場合を考えてみましょう：

javascriptdata() {
  return {
    num: 3, // ここでは3が入っているとします
  }
}

では、プロパティ num の値に応じて、 3つの段落のうち1つだけが表示されるように してみましょう：

html<template>
  <p v-if="num === 1">one</p>
  <p v-if="num === 2">two</p>
  <p v-if="num === 3">three</p>
</template>

さらに複雑な条件を設定することも可能です：

html<template>
  <p v-if="num === 1 || num === 3">
    one or two
  </p>
</template>