체크박스 요소도 v-model 디렉티브를 사용하면 양방향 데이터 바인딩을 할 수 있습니다. 다음 코드처럼 연결된 데이터(fruits)의 초깃값이 논리형 값 중 하나인 true면 초기에 체크 표시된 상태로 해당 데이터를 렌더링할 수 있습니다.
checkbox/1/src/App.vue
<script>
export default {
data() {
return {
fruits: true, // true(체크), false(미체크)
};
},
}
</script>
<template>
<form id="loginForm">
<label for="banana"> <input type="checkbox" id="banana" v-model="fruits" value="banana" />banana </label>
</form>
</template>