[Vue.js] 라디오 버튼을 이용한 단일 선택

<template>
  <div>
    <!-- 예제 1: 선택한 것을 표시하는 부분 -->
    <div>선택한 것: {{ picked }}</div>

    <!-- 예제 2: 라디오 버튼 -->
    <input type="radio" id="one" value="하나" v-model="picked" />
    <label for="one">하나</label>

    <input type="radio" id="two" value="둘" v-model="picked" />
    <label for="two">둘</label>
  </div>
</template>

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

export default {
  setup() {
    // 선택한 값 저장을 위한 ref
    const picked = ref('');

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

Vue에서 라디오 버튼을 사용하여 단일 선택을 구현할 수 있습니다. 사용자는 여러 옵션 중 하나를 선택할 수 있고, 선택한 옵션을 v-model 디렉티브를 사용하여 데이터에 바인딩할 수 있습니다.

1. 예제 1: 선택한 것을 표시하는 부분입니다. 선택한 옵션을 보여줍니다.

2. 예제 2: 라디오 버튼을 보여주는 부분입니다. 각 라디오 버튼은 v-model 디렉티브를 사용하여 picked 변수와 양방향으로 바인딩되어 있습니다. 사용자가 라디오 버튼을 선택하면 해당 값이 picked에 저장됩니다.

라디오 버튼을 이용하면 사용자가 여러 옵션 중 하나를 선택할 수 있으며, 선택한 값을 간편하게 관리할 수 있습니다.