# v-model ## v-model {% embed url="" %} `v-model` 속성은 html 태그 `v-model`은 html 태그에 작성할 수 있는 Vue 전용 속성이며 입력 태그에 작성하여 Vue 백그라운드 데이터와 양방향 연결을 설정할 수 있다. {% hint style="info" %} 이 속성은 HTML 표준이 아니므로 Vue application이 제어할 수 없는 영역에 사용하면 아무런 효과가 없다. {% endhint %} ### 사용 예제 - 입력창 `v-model`의 사용법을 알아보기 위해 예제 코드를 작성한다. ```markup v-model example
``` {% embed url="" %} {% embed url="" %} ![](/files/tKcQsC0vZhLTzsqyXQ8S) 예제를 실행하면 별도의 이벤트 설정 없이도 한 군데를 수정하면 반대쪽도 바뀌는 것을 알 수 있다. 이것을 양방향 연결 또는 실시간 연결이라고 표현한다. Vue application은 화면을 백그라운드 데이터 기반으로 만들도록 권장하기 때문에 입력창과 상호작용할 경우 v-model 속성을 사용하여 data 속성과 연결하면 값의 변경 즉시 데이터에 반영된다. 또한 변경사항은 `Vue devtools`에서 확인 가능하다. `Vue devtools`가 설치되지 않은 경우 설치 문서를 확인하여 설치를 진행한다. {% content-ref url="/pages/94TOnGQXjg5sFaR4DSt9" %} [Vue Devtools](/web/develop-page/js/vuejs/cdn-vue3/vue-devtools.md) {% endcontent-ref %} ### 사용 예제 - 체크박스 & 라디오버튼 `Javascript`에서 `checkbox`의 `checked` 속성은 논리로 처리된다. 마찬가지로 `VueJS`에서도 논리 데이터를 data로 선언해두고 체크박스와 연결할 수 있다. 예제 코드를 통해 Vue data의 `checkbox`와 `radio` 연동에 대해 살펴본다. ```markup v-model example

checkbox

확인용 :

radio

확인용 :
``` {% embed url="" %} {% embed url="" %} ![](/files/I1DPObzrjiZNOBB1tHG5) 예제를 실행하면 checkbox의 변화에 따라 `agree`가 변하고, radio의 선택 여부에 따라 `fruit` 값이 변화하는 것을 확인할 수 있다. 입력이 가능한 태그라면 `v-model` 연결을 통하여 실시간으로 데이터를 관리할 수 있다. 이후 `directive`를 배우면 변화하는 값에 따라 다양한 화면을 구현할 수 있다. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.sysout.co.kr/web/develop-page/js/vuejs/cdn-vue3/vue-instance/v-model.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.