Vue(version 3) 주요 기능 정리(v-model) #5

주요 기능 정리 #4에서는 input type=text일 때 v-model을 사용했을 경우에 대해서 알아봤다.
이번 주제는 input type=checkbox, type=radio 에 대해서 알아보고자 한다.

<template>

  <div>

    <!-- Checkbox 예제 -->

    <input type="checkbox" v-model="isUse" value="true" />

    <!-- 여러개의 Checkbox 예제-->

    <input type="checkbox" v-model="selectedList" value="Coffee" />

    <label>커피</label>

    <input type="checkbox" v-model="selectedList" value="Tea" />

    <label>차</label>

    <input type="checkbox" v-model="selectedList" value="Water" />

    <label>물</label>

    <!-- Radio 예제 -->

    <input type="radio" v-model="choiceValue" value="Cup" />

    <label>유리컵</label>

    <input type="radio" v-model="choiceValue" value="DisposableCup" />

    <label>일회용컵</label>

    <input type="radio" v-model="choiceValue" value="Tumbler" />

    <label>텀블러</label>

  </div>

</template>

<script setup lang="ts">

const isUse = ref<boolean>(false)

const selectedList = ref<string[]>([])

const choiceValue = ref<'Cup' | 'DisposableCup' | 'Tumbler'>('Cup')

</script>

1번째 예제는 v-model을 boolean으로 사용가능하다는 예제이다. 물론 string 도 가능하다.

2번째 예제는 한개의 변수에 여러개의 Array 형태로 사용이 가능하다는 예제이다.
예제에서는 string Array를 사용하였지만, object Array 로도 사용이 가능하다.

3번째는 라디오 버튼의 예제이며, 3개중 1개를 필수적으로 선택하게 되어 있는 예제이다.
기본적으로 string으로 사용이 가능하나, Typescript 에서는 저런식으로 string option 형태로 사용하는 것을 권장한다.
마찬가지로 radio도 object로도 사용이 가능하다.