<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>