Vue에서 요소 토글하기

이제 단추를 눌렀을 때 문단을 토글하는, 즉 첫 번째 클릭 시에는 표시하고 두 번째 클릭 시에는 숨기는 버튼을 만들어 봅시다. 이를 위해 버튼 클릭 시 toggle 메서드를 호출하겠습니다:

App.vue<template>
  <button @click="toggle">토글</button>
  <p v-if="visible">텍스트</p>
</template>

메서드 코드에서는 visible 속성 값을 가져와 반대 값으로 바꿔야 합니다:

javascripttoggle: function() {
  this.visible = !this.visible;
}