더북(TheBook)
    <label for="male">
      <input type="radio" id="male" name="gender" v-model="gender" value="male" />male
    </label>
    <label for="female">
      <input type="radio" id="female" name="gender" v-model="gender" value="female" />female
    </label>
    <button type="button" @click="printData">확인</button>
  </form>
</template>

코드를 실행하면 데이터와 value 속성의 값이 일치하는 male 라디오 버튼 요소만 체크 표시된 상태로 렌더링됩니다. 이후 값을 변경하고 [확인] 버튼을 누를 때마다 선택한 라디오 버튼의 value 속성 값이 자동으로 데이터에 업데이트되는 것을 확인할 수 있습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.