기본 사용
V- 모델 지침을 사용하여 양식 제어 요소에 양방향 데이터 바인딩을 생성 할 수 있습니다. 제어 유형에 따라 요소를 업데이트 할 올바른 메소드를 자동으로 선택합니다. 약간 마법이지만 V- 모델은 구문 설탕 일뿐 아니라 사용자 입력 이벤트의 데이터를 업데이트하며 특히 극단적 인 예제를 처리합니다.
텍스트
<span> 메시지는 다음과 같습니다. {{message}} </span> <br> <input type = "text"v-model = "message"placeholder = "edit me">확인란
단일 확인란, 논리적 값 :
<input type = "checkbox"id = "checkbox"v-model = "checked"> <label for = "checkbox"> {checked}} </label>동일한 배열에 바인딩 된 다중 확인란 :
<입력 유형 = "checkbox"id = "jack"value = "jack"v-model = "checkedNames"> <label for = "jack"> jack </label> <입력 유형 = "checkbox"id = "john"value = "john"v-model = "checkednames"> < "john"> john </label> <입력 유형 = "value" "mike" "mike" "mike"mike. v-model = "checkedNames"> <label for = "Mike"> Mike </label> <br> <span> 확인 된 이름 : {{checkedNames | JSON}} </span> new vue ({el : '...', data : {checkedNames : []}})라디오
<입력 유형 = "radio"id = "one"value = "one"v-model = "picked"> <label for = "one"> one </label> <br> <input type = "radio"id = "two"value = "two"v-model = "apped"> <label for = "two"> t
선택하다
Single choice:
<v-model = "selected"> <옵션 selected> a </옵션> 옵션> b </옵션> <pluxt> c </옵션> </select> <span> selected : {{selected}} </span>객관식 (배열에 바인딩) :
<v-model = "select" "multiple> <옵션 선택> a </옵션> <pluxt> b </옵션> <pluxt> c </옵션> </select> <br> <br> <br> span> 선택 : {{selected | JSON}} </span>동적 옵션, v-for로 렌더링 :
<v-model = "selected"> <옵션 v-for = "옵션 옵션"v-bind : value = "옵션. value"> {{옵션 .text}} </옵션> </select> <span> selected : {{selected}} </span new vue ({el : '...', data : {selected : 'a', 옵션 : [{text : 'one', value : 'a'}, {text : 'two', value : 'b'}, {text : 'Three', value : 'c'}}})바인드 값
라디오 버튼, 확인란 및 상자 옵션의 경우 v- 모델로 바인딩 된 값은 일반적으로 정적 문자열 (확인란의 논리적 값)입니다.
<!-`picked`는 문자열 "a"입니다. <input type = "radio"v-model = "picked"value = "a"> <!-`토글`is true 또는 false-> <입력 상자 "v-model ="toggle "> <!-`selected 'select v-model"> < "toggle"> <! 값 = "ABC"> ABC </옵션> </select>
그러나 때때로 우리는 v-bind를 사용하여 구현할 수있는 VUE 인스턴스의 동적 속성에 값을 바인딩하고자 하며이 속성의 값은 문자열이 아닐 수 있습니다.
확인란
<input type = "checkbox"v-model = "토글"v-bind : true-value = "a"v-bind : false-value = "b"> // 선택한 경우 vm.toggle === vm.a // 선택하지 않은 경우 vm.toggle === vm.b
라디오
<입력 유형 = "Radio"v-model = "pick"v-bind : value = "a"> // 선택했을 때 vm.pick === vm.a
선택 옵션
<v-model = "selected"> <!-객체 문자 그럴-> 옵션 v-bind : value = "{number : 123}"> 123 </옵션> </select> // 선택한 경우 vm.selected //-> 'Object'vm.selected.number //-> 123매개 변수 특성
게으른
기본적으로 V- 모델은 입력 이벤트에서 입력 상자 값과 데이터를 동기화합니다. Change 이벤트에서 동기화하기 위해 게으른 기능을 추가 할 수 있습니다.
<!-"입력"이벤트 대신 "change"에서 업데이트->
<입력 v-model = "msg"Lazy>
숫자
사용자의 입력을 숫자 유형으로 자동 변환하려면 (원래 값의 변환 결과가 NAN 인 경우 원래 값으로 반환) 기능 번호를 추가 할 수 있습니다.
<입력 v-model = "Age"번호>
분노
분해는 최소 지연을 설정하여 각 탭 후 입력 상자 값과 데이터를 지연시킵니다. 모든 업데이트 (예 : 입력 프롬프트의 AJAX 요청과 같은)가 많은 작업을 수행 해야하는 경우 유용합니다.
<입력 v-model = "msg"debounce = "500">
Debounce 매개 변수는 입력 이벤트를 지연시키지 않습니다. 기본 데이터를 "쓰기"합니다. 따라서 분동을 사용할 때는 vm. $ watch ()를 사용하여 데이터 변경에 응답해야합니다. DOM 이벤트를 지연 시키려면 디케이운스 필터를 사용해야합니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 튜토리얼"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.