Vue의 반응형 조건

이제 조건을 반응형으로 만들어 보겠습니다. 예를 들어, 버튼을 클릭하면 요소가 숨겨지도록 만들어 보죠. 다음과 같은 문단이 있다고 가정해 봅시다:

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

우리의 문단이 처음에 표시되도록 만들어 보겠습니다:

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

이제 버튼을 만들어 클릭하면 문단이 숨겨지도록 해보겠습니다:

App.vue<template>
  <button @click="hide">hide</button>
  <p v-if="visible">text</p>
</template>

바인딩된 메서드는 visible 속성을 false로 변경하여 우리의 문단이 숨겨지게 할 것입니다:

javascriptmethods: {
  hide: function() {
    this.visible = false;
  }
}