Vue의 양방향 바인딩 (v-model) 간단 정리 | 수식어

양방향 바인딩

v-model

입력 양식을 처리할 때 입력 요소의 상태와 자바스크립트의 상태를 동기화 해야하는 경우,

value를 바인딩하고 @input 이벤트로 text를 변경하는 것 같은 양방향 바인딩을 해준다.

<input :value="text" @input="event => text = event.target.value" />

<input v-model="text" />

 

 

요소에 따라 다르게 동작하는 v-model

v-model은 내부적으로 어떤 html 요소냐에 따라 다른 속성(:value)과 이벤트(@input)을 사용한다.

 

(1) input type="text", textarea일 경우

value 속성과 input 이벤트 역할을 한다.

 

(2) checkbox, radio일 경우

checked 속성과 change 이벤트 역할을 한다.

또한 checkbox일 경우 boolean이 아닌 다른 값('Y', 'N')을 바인딩하려면 true-value, false-value 속성을 사용할 수 있다.

<label>
    <input
        type="checkbox"
        v-model="checkboxYN"
        true-value="Y"
        false-value="N"
    />
    {{ checkboxYN }}
</label>

(3) select일 경우

value 속성과 change 이벤트 역할을 한다.

 

 

v-model의 수식어

(1) .lazy: v-model은 기본적으로 input 이벤트 후 데이터를 동기화하는데, lazy를 사용하면 change 이벤트 이후에 동기화한다.

<input v-model.lazy="text" />

 

 

(2) .number 는 입력이 자동으로 number 타입으로 형변환된다.

<input v-model.number="text" />

 

(3) .trim 은 입력한 내용 앞 뒤 공백이 제거된다.

<input v-model.trim="text" />