[Vue.js] 다양한 입력 요소의 v-model과 true-value, false-value 속성 활용하기

<template>
  <div>
    <!-- 예제 1: 체크박스 -->
    <input
      type="checkbox"
      v-model="toggle"
      true-value="네"
      false-value="아니오"
    />
    <label>체크박스 선택 결과: {{ toggle }}</label>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 체크박스의 선택 결과를 저장하는 ref
    const toggle = ref(false);

    return {
      toggle
    };
  }
};
</script>

예제 1: 이 예제에서는 true-value와 false-value 속성을 사용하여 체크박스의 선택 결과를 커스터마이징하는 방법을 보여줍니다.

체크박스는 보통 true 또는 false 값을 갖지만, 때로는 이 값을 사용자가 이해하기 쉬운 다른 값으로 변환해야 할 때가 있습니다. 이때 true-value와 false-value 속성을 사용합니다.

• true-value: 체크박스가 체크되었을 때의 값을 지정합니다.
• false-value: 체크박스가 해제되었을 때의 값을 지정합니다.

위 예제에서는 체크박스가 체크되면 "네", 해제되면 "아니오"로 값을 설정하도록 지정되어 있습니다. 이렇게 설정하면 toggle 변수에는 체크박스가 체크되었을 때는 "네", 해제되었을 때는 "아니오"의 값이 할당됩니다. 이를 활용하여 사용자가 선택한 값을 간편하게 제어할 수 있습니다.