v-model
디렉티브를 사용하여 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성할 수 있다.
v-model 디렉티브는 input type 요소를 변경하는 올바른 방법을 자동으로 선택한다.
v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송한다.
<template>
<h1>{{ msg }}</h1> // 변경된 msg 실시간 출력
<input
type="text"
v-model="msg" /> // 실시간 입력한 데이터로 msg 교체
<h1>{{ checked }}</h1> // false 클릭시 true 출력
<input
type="checkbox"
v-model="checked" /> // false 클릭시 true
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!', // msg 초기값
checked: false // checked 초기값
}
}
}
</script>
IME (opens new window)(중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다.
// 한글 사용시
<template>
<h1>{{ msg }}</h1>
<input
type="text"
:value="msg"
@input="msg = $event.target.value" />
<h1>{{ checked }}</h1>
<input
type="checkbox"
v-model="checked" />
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!',
checked: false
}
}
}
</script>
활성 인스턴스의 동적 속성에 값을 바인딩하려고 할 때, v-bind를 사용할 수 있다. 또한, v-bind를 사용하면 입력 값을 문자열이 아닌 값에 바인딩 할 수 있다.
<!-- `toggle` 는 true 또는 false 입니다 -->
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
// 체크된 경우:
vm.toggle === 'yes'
// 체크되지 않은 경우:
vm.toggle === 'no'
<!-- `picked` 는 선택시 문자열 "a" 입니다 -->
<input type="radio" v-model="pick" v-bind:value="a" />
// 체크된 경우:
vm.pick === vm.a
<!-- `selected` 는 선택시 "123" 입니다 -->
<select v-model="selected">
<!-- 인라인 객체 리터럴 -->
<option :value="{ number: 123 }">123</option>
</select>
// 선택된 경우:
typeof vm.selected // => 'object'
vm.selected.number // => 123
//엔터나 다른 부분을 클릭해야 데이터가 동기화 된다
<template>
<h1>{{ msg }}</h1>
<input
type="text"
v-model.lazy="msg" /> // Hello world! 적어도 바로 갱신되지 않고 엔터나 다른 부분을 클릭하여야 작성한 데이터로 갱신
<!-- <input
type="text"
:value="msg"
@change="msg = $event.target.value" /> --> // 동일한 효과
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!'
}
}
}
</script>
// 인풋 요소 타입은 문자열로 반환된다. 숫자 데이터로 지속되어야 된다면 .number를 사용하자
<template>
<h1>{{ msg }}</h1>
<input
type="text"
v-model.number="msg" /> // .number이 없다면 string
</template>
<script>
export default {
data() {
return {
msg: '123'
}
},
watch: {
msg() {
console.log(typeof this.msg) //number
}
}
}
</script>
// 앞 뒤 공백을 제거
<template>
<h1>{{ msg }}</h1>
<input
type="text"
v-model.trim="msg" />
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!'
}
},
watch: {
msg() {
console.log(this.msg)
}
}
}
</script>
Reference