이 기사는 편집자가 공식 문서와 함께 편집 한 자세하고 포괄적 인 튜토리얼입니다. 초보자가 배우는 것이 매우 적합합니다. 관심있는 친구들이 살펴볼 수 있습니다!
정보는 공식 문서에서 나옵니다.
http://cn.vuejs.org/guide/forms.html
형태 바인딩
① 일반적인 결합 방법 :
【1 in 텍스트 입력 상자 바인딩;
【2 ar Textarea 결합 ([1]과 유사);
【3 sel 무선 선택된 값 바인딩;
【4 box 체크 박스 바인딩 (자동으로 번들 어레이, 이름이 필요하지 않음);
【5 bind 결합 선택;
【6 multiple 다중 다중 선택 확인란 바인딩을 선택하십시오.
【7 amic 동적 바인딩 (위의 유형이지만 동일한 값은 상호 작용할 수 있음);
[8] 선택 및 선택되지 않은 확인란은 다른 값이 할당됩니다 (주로 확인되지 않은 상태).
【9 box box checkbox, Radio, 선택한 값을 선택하여 동적으로 바인딩합니다 (주로 데이터의 특정 속성 또는 계산 된 특정 값과 같은 VM 인스턴스의 값 동적 바인딩 객체 또는 속성을 나타냅니다);
코드로 :
<div id = "app"> <input type = "text"v-model = "text"/> <div> {{text}} </div> <div>―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― ――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――� value = "FirstCheckbox"V-Model = "Checkboxes"> FirstCheckbox </label> <br/> <label> <입력 유형 = "checkbox"value = "value ="value = "sec <div> 위의 선택된 값은 다음과 같습니다. {{checkboxes}} </div> <div> 위에서 선택한 값은 (JSON 형식으로 표시, JSON 필터는 여기에 사용됩니다) : {{checkboxes | json}} </div> <div> —------- - - - - - - - - - - - - <input type = "" "" "" "" "" "" "" " v-model = "radio"/> value = a </label> <br> <label> <input type = "radio"value = "b"v-model = "value"/> value = b </label> <br> <div> {{radio}} </div> 여기에 V-model의 값이 데이터에 등록되어야한다는 점 </div> </div>는 red 경고가 있어야합니다. <-------------------</div> </div> <select v-model = "select"> <pluxt> 기본값, 옵션 값을 설정하지 않음 </옵션> <옵션 value = "b"> 값 값이 b로 설정됩니다. 여기에 등록하지 않으면 오류로보고됩니다 </div> <div>――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― value = "a"> a </옵션> <옵션 값 = "b"> b </옵션> <옵션 값 = "c"> c </옵션> <옵션 값 = "d"> d </옵션> <옵션 value = "e"> e </옵션> <div> 다중 선택에서 선택한 값은 다음과 같습니다. y 축 </div> < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - OOIOOOOOOOLYEED ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - OOOIOOOOOONY <label> <input type = "checkbox"value = "b"v-model = "dynamic"> b </label> <br/> <ablable> <input type = "checkbox"value = "c"v-model = "dynamic"> c </label> <br/> <select v-model = "dynamic"multiple> <옵션 value = "a 옵션> <옵션> 옵션> value = "c"> c </옵션> </select> <div> select는 다음과 같습니다. v-bind : true-value = "mivervalues.t"v-bind : false-value = "mivervalues.f"v-model = "miver"> true/false </label> <br/> <div> 다른 값 : {{divid}} </div> </div> 위의 가치는 다중 점검 박스에 대한 변수로 변수로 사용될 수 없으며, 정권과 같은 v-models, 바인딩 및 VM 인스턴스; 따라서 v-bind의 값은 문자열이 될 수는 없지만 {a : 1} (물론이 시간에 표시된 값은 객체이기도합니다) </div> <------------</div> <div> 사용자 정의 된 무선 </div> <label> <input type = "v-bind : value ="v-mod "v-mod"v-mod "v-mod"v-mod "v-mod"v-mod " 1 </label> <label> <input type = "radio"v-bind : value = "textArea"v-model = "customize"/> value is 1 </label> <div> {{customize}} </divize} </div> <div> 값은 vm 또는 객체의 속성이 될 수 있으며 Select도 유효합니다. (메인 세 가지가 선택됩니다. 또한 날짜 유형이 선택되었지만 의미가 없습니다.) TextArea : "여기서 다중선 텍스트/n은 newline이지만 문자열의 공간으로 표시됩니다.", 라디오 : "," ", 다중 :", 동적 : {}, ",", differvalues : {t : "true", "false", customize : '}})).ADD 매개 변수 :
【1 azy 게으른
값은 키를 누르는 경우가 아니라 포커스 상태가 취소 된 후에 만 업데이트됩니다.
텍스트 입력 상자와 Textarea에 유효합니다
코드로 :
<입력 유형 = "text"v-model = "text"Lazy/> <div> {{text}} </div>【2. 숫자
입력 값을 자동으로 숫자 유형으로 변환하고 NAN 유형으로 변환하면 원래 값으로 돌아갑니다.
코드로 :
<입력 유형 = "text"v-model = "text"번호/> <div> {{text}} </div> <div> {{typeof text}} </div>매개 변수 번호가 추가되면 숫자를 입력하면 프롬프트 유형이 문자열입니다. 그것을 추가 한 후, 순수한 숫자는 숫자 유형을 자극합니다.
【3 ounce debounce = "밀리 초"
몇 밀리 초에 값이 연속으로 변경되지 않으면 변수 값의 변경이 트리거됩니다.
코드로 :
<입력 유형 = "text"v-model = "text"debounce = "1000"/> <div> {{text}} </div>500ms의 시차로 6 개의 숫자 1, 2, 3, 4, 5, 6을 순서대로 입력하면 텍스트 값이 업데이트되지 않습니다.
입력을 중지하면 1000ms가 있으면 텍스트 값이 업데이트됩니다.
따라서 Ajax와 같은 고소 소비 작업에 적합합니다.
위는 vuejs 및 편집자가 소개 한 양식 요소 예제의 예제입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!