[Vue.js] 단일 체크박스의 양방향 데이터 바인딩

<template>
  <div>
    <!-- 예제 1: 단일 체크박스와 체크 여부 표시 -->
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>

    <!-- 예제 2: 체크 여부에 따라 다른 텍스트 표시 -->
    <div>{{ checked ? '체크됨' : '체크되지 않음' }}</div>

    <!-- 예제 3: 체크 여부에 따라 스타일 변경 -->
    <div :style="{ 'color': checked ? 'green' : 'red' }">체크 여부에 따라 색상 변경</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 체크박스의 상태를 저장하는 데이터
      checked: false
    };
  }
};
</script>

Vue에서 단일 체크박스는 불리언 값을 사용하여 상태를 저장합니다. v-model 디렉티브를 사용하여 체크 여부를 바인딩하고, 체크 여부를 표시하는 데에도 동일한 데이터를 사용할 수 있습니다.

1. 예제 1: 단일 체크박스와 해당 체크 여부를 표시하는 부분입니다. 체크박스를 클릭하면 checked 데이터가 토글되어 체크 여부가 변경됩니다.

2. 예제 2: 체크 여부에 따라 다른 텍스트를 표시하는 예제입니다. checked 데이터를 조건부 표현식을 사용하여 체크됨 또는 체크되지 않음을 표시합니다.

3. 예제 3: 체크 여부에 따라 텍스트의 색상을 변경하는 예제입니다. checked 데이터를 조건부 스타일을 사용하여 체크될 때는 녹색, 그렇지 않을 때는 빨간색으로 변경합니다.

Vue의 단일 체크박스를 사용하면 사용자의 입력을 간단하게 처리할 수 있으며, 그에 따라 UI를 동적으로 업데이트할 수 있습니다.