입력폼 데이터 바인딩 - 2(select, checkbox, radio)

1. 개인 공부 목적으로 작성한 글입니다.
2. 아래 출처를 참고하여 작성하였습니다.

---

Intro

1. 입력폼 데이터 중에 select, checkbox, radio 속성에 대해 데이터 바인딩하는 방법을 알아보겠습니다.

---

1. select 태그

1. select box 속성 역시 데이터 바인딩을 위해 v-model을 사용합니다.
   • 내부적으로 selectbox의 value 속성과 연결되어 바인딩됩니다.

<template>
<div>
    <select v-model="city">
        <option value="02">서울</option>
        <option value="21">부산</option>
        <option value="064">제주</option>
    </select>
</div>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            city: "21" //이렇게 value를 미리 셋팅해주면 "부산"부터 셋팅되어 화면에 나옵니다.
        };
    },
    setup() {},
    created() {},   
    mounted() {},   
    unmounted() {}, 
    methods: {}
}
</script>

---

2. checkbox 태그

1. checkbox는 v-model을 쓰면 내부적으로 checkbox의 value 속성이 아니라 checked 속성하고 연결이 됩니다.
2. value 속성하고 연결하고 싶다면 v-bind: 를 사용하면 됩니다.

---

2-1. 단일 checkbox 처리

<template>
<div>
    <label>
        <input type="checkbox" v-model="checked"> {{checked}}
    </label>
</div>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            city: "21",
            checked: true,
        };
    },
    setup() {},
    created() {},   
    mounted() {},   
    unmounted() {}, 
    methods: {}
}
</script>

---

2-2. 여러 개의 checkbox 처리

1. 여러 개의 checkbox에 대해서는 배열을 사용해서 state를 관리할 수 있습니다.

<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>
</div>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            checked: [],
        };
    },
    setup() {},
    created() {},   
    mounted() {},   
    unmounted() {}, 
    methods: {}
}
</script>

---

3. radio 태그

1. radio도 checkbox와 마찬가지로 v-model을 쓰면 내부적으로 checked 속성하고 연결이 됩니다.
2. value 속성하고 연결하고 싶다면 v-bind: 를 사용하면 됩니다.

<template>
<div>
    <label><input type="radio" value="서울" v-model="picked" />서울</label>
    <label><input type="radio" value="부산" v-model="picked" />부산</label>
    <label><input type="radio" value="제주" v-model="picked" />제주</label>
    <br>
    <span> 선택한 지역: {{picked}} </span>
</div>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            picked: "",
        };
    },
    setup() {},
    created() {},   
    mounted() {},   
    unmounted() {}, 
    methods: {}
}
</script>

---

3-1. v-bind: 사용 예시(radio 태그)

<template>
<div>
    <label><input type="radio" v-bind:value="radio1" v-model="picked" />서울</label>
    <label><input type="radio" v-bind:value="radio2" v-model="picked" />부산</label>
    <label><input type="radio" v-bind:value="radio3" v-model="picked" />제주</label>
    <br>
    <span> 선택한 지역: {{picked}} </span>
</div>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            picked: "",
            radio1: "서울",
            radio2: "부산",
            radio3: "제주",
        };
    },
    setup() {},
    created() {},   
    mounted() {},   
    unmounted() {}, 
    methods: {}
}
</script>

---

출처

1. Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)