Vue.js
Vue.js
Source
Edit
History

폼 입력 바인딩

카탈로그
  1. 1. 기본 사용법
    1. 1.1. 여러줄을 가진 문장
    2. 1.2. 체크박스
    3. 1.3. 라디오
    4. 1.4. 셀렉트
  2. 2. 값 바인딩하기
    1. 2.1. 체크박스
    2. 2.2. 셀렉트 옵션
  3. 3. 수식어
    1. 3.1. .lazy
    2. 3.2. .number
    3. 3.3. .trim
  4. 4. v-model 과 컴포넌트

기본 사용법

v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. 입력 유형에 따라 엘리먼트를 업데이트 하는 올바른 방법을 자동으로 선택합니다. 약간 이상하지만 v-model은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 “syntax sugar”이며 일부 경우에 특별한 주의를 해야합니다.

`v-model`은 모든 form 엘리먼트의 초기 `value`와 `checked` 그리고 `selected` 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 `data` 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.

v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송합니다 :

  • text 와 textarea 태그는 value속성과 input이벤트를 사용합니다.
  • 체크박스들과 라디오버튼들은 checked 속성과 change 이벤트를 사용합니다.
  • Select 태그는 value를 prop으로, change를 이벤트로 사용합니다.

[IME](https://en.wikipedia.org/wiki/Input_method) (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 `v-model`이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 `input` 이벤트를 대신 사용하십시오.

### 문자열 
1
2
<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

메시지: {{ message }}

여러줄을 가진 문장

1
2
3
4
<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>
여러 줄을 가지는 메시지:

{{ message }}


텍스트 영역의 보간 (<textarea>{{ text }}</textarea>)은 작동하지 않습니다. 대신 v-model를 사용하십시오.

체크박스

하나의 체크박스는 단일 boolean 값을 가집니다.

1
2
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

여러개의 체크박스는 같은 배열을 바인딩 할 수 있습니다

1
2
3
4
5
6
7
8
9
10
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>체크한 이름: {{ checkedNames }}</span>
</div>
1
2
3
4
5
6
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

체크한 이름: {{ checkedNames }}

라디오

1
2
3
4
5
6
7
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>선택: {{ picked }}</span>


Picked: {{ picked }}

셀렉트

하나의 셀렉트

1
2
3
4
5
6
7
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>선택함: {{ selected }}</span>
1
2
3
4
5
6
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
Selected: {{ selected }}

`v-model` 표현식의 초기 값이 어떤 옵션에도 없으면, `

다중 셀렉트 (배열을 바인딩 합니다): 
1
2
3
4
5
6
7
<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

Selected: {{ selected }}

v-for를 이용한 동적 옵션 렌더링

1
2
3
4
5
6
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
1
2
3
4
5
6
7
8
9
10
11
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})
Selected: {{ selected }}

값 바인딩하기

라디오, 체크박스 및 셀렉트 옵션의 경우, v-model 바인딩 값은 보통 정적인 문자열(또는 체크 박스의 boolean) 입니다.

1
2
3
4
5
6
7
8
9
10
<!-- `picked` 는 선택시 문자열 "a" 입니다 -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 는 true 또는 false 입니다 -->
<input type="checkbox" v-model="toggle">

<!-- `selected`는 "ABC" 선택시 "abc" 입니다 -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

그러나 때로 값을 Vue 인스턴스에 동적 속성에 바인딩 해야할 수 있습니다. v-bind를 사용할 수 있습니다. v-bind를 사용하면 입력 값을 문자열이 아닌 값에 바인딩 할 수도 있습니다.

체크박스

1
2
3
4
5
6
<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
1
2
3
4
// 체크된 경우
vm.toggle === 'yes'
// 체크 되지 않은 경우
vm.toggle === 'no'

`true-value` 와 `false-value` 속성은 폼 전송시 체크되지 않은 박스를 포함하지 않기 때문에 입력의 `value` 속성에 영향을 미치지 않습니다. 두 값 중 하나가 폼을 통해 전송 되려면 (예 : '예' 또는 '아니요') 라디오를 대신 사용하십시오.

### 라디오 
1
<input type="radio" v-model="pick" v-bind:value="a">
1
2
// 체크 하면:
vm.pick === vm.a

셀렉트 옵션

1
2
3
4
<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
1
2
3
// 선택 하면:
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

수식어

.lazy

기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화 합니다. (단 앞에서 설명한 IME 구성은 제외됩니다.) .lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다.

1
2
<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg" >

.number

사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 됩니다.

1
<input v-model.number="age" type="number">

type="number"를 사용하는 경우에도 HTML 입력 엘리먼트의 값은 항상 문자열을 반환하기 때문에 이것은 종종 유용하게 사용할 수 있습니다. If the value cannot be parsed with parseFloat(), then the original value is returned.

.trim

v-model이 관리하는 input을 자동으로 trim 하기 원하면, trim 수정자를 추가하면 됩니다.

1
<input v-model.trim="msg">

v-model 과 컴포넌트

Vue의 컴포넌트에 익숙하지 않으면 지금은 보지 않아도 괜찮습니다.

HTML의 기본 제공 input 유형이 항상 사용자의 요구를 만족시킬 수는 없습니다. 다행히 Vue 컴포넌트를 사용하면 완전히 사용자 정의 된 동작으로 재사용 가능한 input을 만들 수 있습니다. 이 input은 v-model에도 작동합니다! 자세한 컴포넌트 가이드의 사용자 정의 입력을 참조하십시오.