[Vue.js] - Vue 체크박스(checkbox) 데이터 바인딩 하는 방법

#Vue 체크박스(checkbox) 데이터 바인딩 하는 방법

-Vue에서 체크박스를 `v-model` 디렉티브로 바인딩하는 방법은 매우 간단합니다. `v-model` 디렉티브를 사용하여 체크박스의 상태를 Vue 데이터 모델과 양방향으로 바인딩할 수 있습니다.

 

-Vue.js 코드

<template>
    <div>
        <label><input type="checkbox" v-model="checked">{{ checked }}</label>    
    </div>
</template>

<script>
    export default {
        data() {
            return {
                checked: true
            };
        }
    }
</script>

 

-Vue 체크박스(checkbox) 데이터 바인딩 테스트

true

false

 

 

#여러 개의 체크박스를 데이터 바인딩 하는 방법입니다.

-배열을 이용해서 데이터를 한 번에 바인딩 처리 합니다.

-Vue.js 코드

<template>
    <div>
        <label><input type="checkbox" value="사과" v-model="checked">사과</label>   
        <label><input type="checkbox" value="바나나" v-model="checked">바나나</label>
        <label><input type="checkbox" value="수박" v-model="checked">수박</label>
        <br>
        <span>체크한 과일: {{ checked }}</span>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                checked: []
            };
        }
    }
</script>

 

-Vue 여러 개의 체크박스(checkbox) 데이터 바인딩 테스트