input 태그 데이터 바인딩

- Vue.js 인스턴스 데이터를 사용 하여 <input> 요소의 데이터 바인딩이 필요 할 경우 하단 과 같이 사용한다.

<input type = "text" v-bind:value="인스턴스 data 내 object 명"/>

 

- 예시

Vue 인스턴스내 존재하는 객체 데이터를 바인딩을 하고 싶은경우

Vue 인스턴스 생성 후 data 객체내 inputData 객체가 있는경우

<input> 태그 내 v-bind 기능을 이용 하여 데이터 바인딩을 실시한다.

결과

<input type> 속성에도 바인딩이 가능하다.

v-bind:value가 불편할 경우 type 처럼 :type으로 :value 사용이 가능하다.

같은 방식으로 함수 바인딩으로도 대체 가능하다.