You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Using `v-bind` and `v-on` together, we can create two-way bindings on form input elements:
3
+
`v-bind`와 `v-on`을 함께 사용하면, 폼 안의 입력 엘리먼트에 양방향 바인딩을 만들 수 있습니다:
4
4
5
5
```vue-html
6
6
<input :value="text" @input="onInput">
@@ -11,8 +11,7 @@ Using `v-bind` and `v-on` together, we can create two-way bindings on form input
11
11
```js
12
12
methods: {
13
13
onInput(e) {
14
-
// a v-on handler receives the native DOM event
15
-
// as the argument.
14
+
// v-on 핸들러는 네이티브 DOM 이벤트를 인자로 받습니다.
16
15
this.text=e.target.value
17
16
}
18
17
}
@@ -24,24 +23,26 @@ methods: {
24
23
25
24
```js
26
25
functiononInput(e) {
27
-
// a v-on handler receives the native DOM event
28
-
// as the argument.
26
+
// v-on 핸들러는 네이티브 DOM 이벤트를 인자로 받습니다.
29
27
text.value=e.target.value
30
28
}
31
29
```
32
30
33
31
</div>
34
32
35
-
Try typing in the input box - you should see the text in `<p>` updating as you type.
33
+
입력란에 입력해 보십시오.
34
+
입력할 때 `<p>`에 텍스트가 업데이트되는 것을 볼 수 있습니다.
36
35
37
-
To simplify two-way bindings, Vue provides a directive,`v-model`, which is essentially a syntax sugar for the above:
36
+
Vue는 양방향 바인딩을 단순화하기 위해, 위 문법을 간편 표기하는`v-model` 디렉티브를 제공합니다:
38
37
39
38
```vue-html
40
39
<input v-model="text">
41
40
```
42
41
43
-
`v-model` automatically syncs the `<input>`'s value with the bound state, so we no longer need to use a event handler for that.
42
+
`v-model`은 `<input>`의 값을 바인딩된 상태와 자동으로 동기화하므로,
43
+
더 이상 이에 대한 이벤트 핸들러를 사용할 필요가 없습니다.
44
44
45
-
`v-model` works not only on text inputs, but also other input types such as checkboxes, radio buttons, and select dropdowns. We cover more details in <atarget="_blank"href="/guide/essentials/forms.html">Guide - Form Bindings</a>.
45
+
`v-model`은 텍스트 입력 외에도 체크박스, 라디오 버튼, 셀렉트 드롭다운과 같은 다른 입력 타입에서도 작동합니다.
46
+
자세한 내용은 <atarget="_blank"href="/guide/essentials/forms.html">가이드 - Form 입력 바인딩</a>에서 다룹니다.
46
47
47
-
Now, try to refactor the code to use `v-model` instead.
0 commit comments