Vue에서 checkbox 작업하기

이제 checkbox를 다루는 방법을 살펴보겠습니다. 다음과 같은 토글 스위치가 있다고 가정해 봅시다:

App.vue<template>
  <input type="checkbox">
</template>

이 checkbox의 작동을 제어할 checked 속성을 만들어 보겠습니다:

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

v-model을 통해 이 속성을 바인딩합시다:

App.vue<template>
  <input type="checkbox" v-model="checked">
</template>

checkbox가 체크되면 checked 속성 값은 true가 되고, 체크되지 않으면 false가 됩니다. 이를 확인하기 위해 속성 값을 화면에 출력해 볼 수 있습니다. 다음과 같이요:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked }}</p>
</template>

삼항 연산자를 사용하여 더 의미 있는 내용을 출력할 수도 있습니다:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked ? 'yes' : 'no' }}</p>
</template>