# v-bind
`v-bind`는 HTML에 동적 속성을 부여하기 위한 Vue의 기능이다. 동적 속성이란 상황에 따라 다르게 설정될 수 있는 형태를 의미하며, 태그내의 모든 속성에 사용이 가능하다.
만약, id를 동적으로 설정하고 싶다면 태그에 `v-bind:id` 속성을 추가하고 원하는 데이터를 설정하면 된다.
```html
<태그 v-bind:id="데이터">
```
줄여서 표현할 수 있도록 지원한다. 속성 이름 앞에 `:`만 사용하면 된다.
```html
<태그 :id="데이터">
```
### 사용 예제 - 비밀번호 힌트
```html
Welcome to Vue JS 3
비밀번호 입력
비밀번호 표시
```
{% embed url="" %}
비밀번호 표시하기를 체크하면 `visible`이 true가 되면서 비밀번호 입력창의 `type`이 text로 변하는 것을 확인할 수 있다.
### 사용 예제 - 다음 단계 버튼 활성화
```markup
Vue Directive Example
닉네임 입력
닉네임은 한글 2~10자 이내로 작성하세요
```
{% embed url="" %}
닉네임이 한글 2글자에서 10글자 이내로 작성된 경우만 다음 단계로 이동하는 버튼이 활성화 되는 것을 확인할 수 있다.
---
# 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-directive/v-bind.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.