Vue에서 요소 토글하기
이제 단추를 눌렀을 때 문단을 토글하는, 즉 첫 번째 클릭 시에는 표시하고 두 번째 클릭 시에는 숨기는 버튼을 만들어 봅시다. 이를 위해 버튼 클릭 시
toggle 메서드를 호출하겠습니다:
<template>
<button @click="toggle">토글</button>
<p v-if="visible">텍스트</p>
</template>
메서드 코드에서는 visible 속성 값을 가져와 반대 값으로 바꿔야 합니다:
toggle: function() {
this.visible = !this.visible;
}
세 개의 문단과 세 개의 버튼이 주어졌습니다. 각 버튼이 해당하는 문단을 토글하도록 만드세요.
