Vue에서 복잡한 조건

v-if 지시문에서는 더 복잡한 조건을 만들 수 있습니다. 예를 들어, num 속성에 1, 2 또는 3 숫자 중 하나가 있을 수 있다고 가정해 보겠습니다:

javascriptdata() {
  return {
    num: 3, // 현재는 3이라고 가정
  }
}

이제 num 속성 값에 따라 하나만 표시될 세 개의 단락을 만들어 봅시다:

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>