Merge pull request #232 from niceplugin/examples/form-bindings

예제 번역: /examples/form-bindings

Author: narusas

ko-KR/.vitepress/config.ts

@@ -440,7 +440,7 @@ export const sidebar = {
           link: '/examples/#conditionals-and-loops'
         },
         {
-          text: 'Form 바인딩',
+          text: '폼(form) 바인딩',
           link: '/examples/#form-bindings'
         },
         {

ko-KR/src/examples/src/form-bindings/App/composition.js

@@ -2,12 +2,12 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-    const text = ref('Edit me')
+    const text = ref('수정해보세요')
     const checked = ref(true)
-    const checkedNames = ref(['Jack'])
-    const picked = ref('One')
-    const selected = ref('A')
-    const multiSelected = ref(['A'])
+    const checkedNames = ref(['철수'])
+    const picked = ref('서울')
+    const selected = ref('가')
+    const multiSelected = ref(['무궁화'])
 
     return {
       text,

ko-KR/src/examples/src/form-bindings/App/options.js

@@ -1,12 +1,12 @@
 export default {
   data() {
     return {
-      text: 'Edit me',
+      text: '수정해보세요',
       checked: true,
-      checkedNames: ['Jack'],
-      picked: 'One',
-      selected: 'A',
-      multiSelected: ['A']
+      checkedNames: ['철수'],
+      picked: '서울',
+      selected: '가',
+      multiSelected: ['무궁화']
     }
   }
-}
+}

ko-KR/src/examples/src/form-bindings/App/template.html

@@ -1,45 +1,45 @@
-<h2>Text Input</h2>
+<h2>텍스트 입력</h2>
 <input v-model="text"> {{ text }}
 
-<h2>Checkbox</h2>
+<h2>채크박스</h2>
 <input type="checkbox" id="checkbox" v-model="checked">
-<label for="checkbox">Checked: {{ checked }}</label>
+<label for="checkbox">체크됨: {{ checked }}</label>
 
 <!--
-  multiple checkboxes can bind to the same
-  array v-model value
+  여러 체크박스 값을 v-model을 사용하여
+  하나의 배열에 바인딩할 수 있습니다.
 -->
-<h2>Multi Checkbox</h2>
-<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>
-<p>Checked names: <pre>{{ checkedNames }}</pre></p>
+<h2>멀티 채크박스</h2>
+<input type="checkbox" id="chulsoo" value="철수" v-model="checkedNames">
+<label for="chulsoo">철수</label>
+<input type="checkbox" id="yuri" value="유리" v-model="checkedNames">
+<label for="yuri">유리</label>
+<input type="checkbox" id="maenggu" value="맹구" v-model="checkedNames">
+<label for="maenggu">맹구</label>
+<p>체크된 이름: <pre>{{ checkedNames }}</pre></p>
 
-<h2>Radio</h2>
-<input type="radio" id="one" value="One" v-model="picked">
-<label for="one">One</label>
+<h2>라디오</h2>
+<input type="radio" id="seoul" value="서울" v-model="picked">
+<label for="seoul">서울</label>
 <br>
-<input type="radio" id="two" value="Two" v-model="picked">
-<label for="two">Two</label>
+<input type="radio" id="busan" value="부산" v-model="picked">
+<label for="busan">부산</label>
 <br>
-<span>Picked: {{ picked }}</span>
+<span>고른것: {{ picked }}</span>
 
-<h2>Select</h2>
+<h2>선택</h2>
 <select v-model="selected">
-  <option disabled value="">Please select one</option>
-  <option>A</option>
-  <option>B</option>
-  <option>C</option>
+  <option disabled value="">하나를 선택하세요</option>
+  <option>가</option>
+  <option>나</option>
+  <option>다</option>
 </select>
-<span>Selected: {{ selected }}</span>
+<span>선택함: {{ selected }}</span>
 
-<h2>Multi Select</h2>
+<h2>복수 선택</h2>
 <select v-model="multiSelected" multiple style="width:100px">
-  <option>A</option>
-  <option>B</option>
-  <option>C</option>
+  <option>무궁화</option>
+  <option>진달래</option>
+  <option>개나리</option>
 </select>
-<span>Selected: {{ multiSelected }}</span>
+<span>선택함: {{ multiSelected }}</span>

ko-KR/src/examples/src/form-bindings/description.txt

@@ -1 +1 @@
-We can create two-way bindings between state and form inputs using the v-model directive.
+v-model 디렉티브를 사용하여 상태와 폼 입력 간에 양방향 바인딩을 만들 수 있습니다.