코드를 실행하면 체크박스에 표시된 상태로 화면에 렌더링됩니다.

그림 3-31 체크박스 요소 실행결과

체크박스 요소는 보통 사용자에게 복수 선택지를 제공하는 용도로 사용합니다. 이럴 때는 v-model 디렉티브로 바인딩할 데이터를 배열로 만듭니다. 그리고 배열에 데이터와 연결할 체크박스 요소의 value 속성 값을 넣어주면 해당 체크박스 요소를 초기에 체크 표시된 상태로 렌더링할 수 있습니다.

checkbox/2/src/App.vue

<script>
export default {
  data() {
    return {

      fruits: ['banana', 'orange'],

    };
  },

  methods: {
    printData() {