> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/cdn-vue3/vue-instance/v-model.md). # 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`를 배우면 변화하는 값에 따라 다양한 화면을 구현할 수 있다.