반응형
v-model (양방향 바인딩)
자동으로 input의 value로 입력된 값이
Vuejs의 data와 바인딩 된다.
입력 이벤트가 발생하면, 입력된 값을 Vuejs의 data의 name 속성에 바인딩하고,
이를 통해 Vuejs의 data의 name 속성 값이 바뀌면, 그 값이 input의 value에 바인딩된다.
양방향으로 통신하기 때문에, 양방향 바인딩이라고 한다.
<input type='text'
v-model='name'>
아래의 코드와 동일하다고 보면 된다.
<input type='button'
v-bind:value='name'
v-on:input='setName' />
v-model을 사용하면,
- 위 코드에서 사용되는 setName() 메소드는 작성하지 않아도 된다.
- data에 'name' 속성은 필요하다.
반응형
'IT > Vue' 카테고리의 다른 글
[Vuejs] methods, computed, watch 차이 (0) | 2023.01.17 |
---|---|
[Vuejs] 이벤트 수식어 submit.prevent (0) | 2023.01.17 |