[Vue.js] - Vue Select Box 데이터 바인딩 하는 방법

#Vue Select 데이터 바인딩 하는 방법

-Vue에서 `<select>` 요소를 `v-model` 디렉티브로 바인딩하는 방법은 `<input>` 요소나 `<textarea>` 요소와 매우 유사합니다. `v-model` 디렉티브를 사용하여 `<select>` 요소의 선택된 옵션 값을 Vue 데이터 모델과 양방향으로 바인딩할 수 있습니다.

 

-Vue.js 코드

<template>
    <select v-model="fruit">
        <option value="banana">바나나</option>
        <option value="apple">사과</option>
        <option value="watermelon">수박</option>
    </select>
</template>

<script>
    export default {
        data() {
            return {
                fruit: "apple"
            };
        }
    }
</script>

 

-Vue Select 데이터 바인딩 테스트

data()에서 초기값을 apple로 줘서 사과가 셀렉트 박스의 초기값으로 설정된 것을 확인하실 수 있습니다.