Form.vue_20211215

<template>
    <div>
        <h3>form 실습</h3>
        <hr />
        <input type="checkbox" v-model="chk1" />약관동의
        <hr />
        <input type="checkbox" value="1" v-model="chk2" />html
        <input type="checkbox" value="2" v-model="chk2" />css
        <input type="checkbox" value="3" v-model="chk2" />javascript
        <input type="checkbox" value="4" v-model="chk2" />vue


    </div>
</template>

<script>
    export default {
        watch: { // 상태변수 값 변화 감지
            chk1: {
                handler(e) {
                    console.log('chk1', e);
                }
            },
            chk2: {
                handler(e) {
                    console.log('chk2', e);
                }
            }
        },
        data() { // 상태변수 설정
            return {
                chk1: true,  // 체크박스 값 true, false
                chk2: ["1", "3"], // 체크박스가 여러 개일 경우 배열로!, 밸류 값 있어야 함
            }
        }
    }
</script>

<style scoped>

</style>