Vue에서 조건부 표시

다음으로 배울 지시어는 v-if입니다. 이를 사용하면 요소를 표시하거나 숨길 수 있습니다. 이 지시어의 작동 방식은 다음과 같습니다: 매개변수로 data 객체의 임의의 속성을 받습니다. 이 속성 값이 true이면 요소가 표시되고, false이면 숨겨집니다.

예제를 통해 살펴보겠습니다. v-if 속성이 있는 단락이 있다고 가정합니다. 이 속성의 값으로 visible 속성을 사용합니다. 다음과 같이 작성합니다:

App.vue<template>
  <p v-if="visible">text</p>
</template>

속성 값을 true로 설정해 봅시다. 이 경우 단락이 표시됩니다:

javascriptdata() {
  return {
    visible: true,
  }
}

반면에 visible 값을 false로 설정하면 단락이 숨겨집니다:

javascriptdata() {
  return {
    visible: false,
  }
}