코드를 실행하면 체크박스에 표시된 상태로 화면에 렌더링됩니다.
그림 3-31 체크박스 요소 실행결과
체크박스 요소는 보통 사용자에게 복수 선택지를 제공하는 용도로 사용합니다. 이럴 때는 v-model 디렉티브로 바인딩할 데이터를 배열로 만듭니다. 그리고 배열에 데이터와 연결할 체크박스 요소의 value 속성 값을 넣어주면 해당 체크박스 요소를 초기에 체크 표시된 상태로 렌더링할 수 있습니다.
checkbox/2/src/App.vue
<script>
export default {
data() {
return {
fruits: ['banana', 'orange'],
};
},
methods: { printData() {