Vue의 반응형 조건
이제 조건을 반응형으로 만들어 보겠습니다. 예를 들어, 버튼을 클릭하면 요소가 숨겨지도록 만들어 보죠. 다음과 같은 문단이 있다고 가정해 봅시다:
<template>
<p v-if="visible">text</p>
</template>
우리의 문단이 처음에 표시되도록 만들어 보겠습니다:
data() {
return {
visible: true,
}
}
이제 버튼을 만들어 클릭하면 문단이 숨겨지도록 해보겠습니다:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
바인딩된 메서드는 visible 속성을
false로 변경하여 우리의
문단이 숨겨지게 할 것입니다:
methods: {
hide: function() {
this.visible = false;
}
}
문단과 버튼이 주어져 있습니다. 문단이 처음에는 숨겨져 있다고 가정합니다. 문단을 표시하는 버튼을 만드세요.
문단과 두 개의 버튼이 주어져 있습니다. 첫 번째 버튼은 문단을 표시하고, 두 번째 버튼은 문단을 숨기게 만드세요.
이전 문제를 수정하여 화면에 항상 하나의 버튼만 보이도록 만드세요: 문단이 표시되어 있으면 숨기는 버튼이, 문단이 숨겨져 있으면 표시하는 버튼이 보이도록 합니다.
