[Vue.js] 다양한 입력 요소의 v-model 활용하기

<template>
  <div>
    <!-- 예제 1: 라디오 버튼 -->
    <input type="radio" v-model="picked" value="가" />
    <label>라디오 버튼 선택 결과: {{ picked }}</label>

    <!-- 예제 2: 체크박스 -->
    <input type="checkbox" v-model="toggle" />
    <label>체크박스 선택 결과: {{ toggle }}</label>

    <!-- 예제 3: 셀렉트 박스 -->
    <select v-model="selected">
      <option value="한글">한글</option>
    </select>
    <label>셀렉트 박스 선택 결과: {{ selected }}</label>
  </div>
</template>

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

export default {
  setup() {
    // 라디오 버튼의 선택 결과를 저장하는 ref
    const picked = ref('가');

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

    // 셀렉트 박스의 선택 결과를 저장하는 ref
    const selected = ref('한글');

    return {
      picked,
      toggle,
      selected
    };
  }
};
</script>

이 예제에서는 Vue.js의 v-model 디렉티브를 사용하여 다양한 입력 요소를 관리하는 방법을 보여줍니다.

1. 예제 1: 라디오 버튼을 사용하여 사용자가 선택한 값을 표시합니다. 라디오 버튼은 문자열 "가"가 선택되어 있는지 여부에 따라 picked 변수에 바인딩됩니다.

2. 예제 2: 체크박스를 사용하여 사용자가 토글한 값을 표시합니다. 체크박스는 true 또는 false 값에 따라 toggle 변수에 바인딩됩니다.

3. 예제 3: 셀렉트 박스를 사용하여 사용자가 선택한 값을 표시합니다. 첫 번째 옵션이 "한글"로 설정되어 있으며, 사용자가 다른 옵션을 선택하면 해당 값을 selected 변수에 바인딩합니다.

이러한 방식을 사용하면 다양한 입력 요소의 값을 간편하게 관리할 수 있습니다.