Vue.js는 매일 양식 제어 바인딩을 배워야 합니다.

기본 사용법

v-model 지시문을 사용하여 양식 제어 요소에 대한 양방향 데이터 바인딩을 생성할 수 있습니다. 컨트롤 유형에 따라 요소를 업데이트하는 올바른 방법을 자동으로 선택합니다. 약간 마술적이긴 하지만 v-model은 사용자 입력 이벤트에 대한 데이터를 업데이트하고 특히 일부 극단적인 경우를 처리하기 위한 구문 설탕일 뿐입니다.

텍스트

<span>Message is: {{ 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>

동일한 배열에 연결된 여러 확인란:

<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>Checked names: {{ checkedNames | json }}</span>

new Vue({
 el: '...',
 data: {
 checkedNames: []
 }
})

Radio

<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: {{ picked }}</span>

선택

단일 선택:

<select v-model="selected">
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

다중 선택(배열에 바인딩):

<select v-model="selected" multiple>
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

v-for로 렌더링된 동적 옵션:

<select v-model="selected">
 <option v-for="option in options" v-bind:value="option.value">
 {{ option.text }}
 </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
 el: '...',
 data: {
 selected: 'A',
 options: [
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
 ]
 }
})

바인딩 값

라디오 버튼, 체크 상자 및 선택 상자 옵션의 경우 v-model에 바인딩된 값은 일반적으로 정적 문자열입니다(체크 상자의 경우 논리 값).

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
 
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

그러나 때때로 Vue 인스턴스의 동적 속성에 값을 바인딩하고 싶을 때가 있습니다. 이 경우 v-bind를 사용하여 구현할 수 있으며 이 속성의 값은 a일 필요는 없습니다. 끈.

체크박스

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
 
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

라디오

<input type="radio" v-model="pick" v-bind:value="a">
 
// 当选中时
vm.pick === vm.a

옵션 선택

<select v-model="selected">
 <!-- 对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>
 
// 当选中时
typeof vm.selected // -> &#39;object&#39;
vm.selected.number // -> 123

매개변수 속성

lazy

기본적으로 v-model은 입력 이벤트에 있습니다. 입력 상자 값과 데이터를 동기화하려면 지연 속성을 추가하여 변경 이벤트에서 동기화할 수 있습니다.

abb276108e481b3339599575712be0ee
7b3de46afb7a781202135d65b147f4ca

number

사용자가 입력한 값을 Number형으로 자동 변환하고 싶은 경우(원래 값의 변환 결과가 다음과 같은 경우) NaN, 원래 값 반환), 기능 번호를 추가할 수 있습니다:

bc3a745ade46aea43913a82bbd8501d0

debounce

debounce 최소값 설정 지연, 매 첫 번째 탭 이후 입력 상자의 값과 데이터의 동기화를 지연합니다. 이는 각 업데이트에 비용이 많이 드는 작업(예: 입력 프롬프트의 Ajax 요청)이 필요한 경우 유용합니다.

82ddc4b28363de60a9d851e978fbb3a6

디바운스 매개변수는 입력 이벤트를 지연시키지 않으며 기본 데이터 "쓰기"를 지연시킵니다. 따라서 디바운스를 사용할 때 데이터 변경에 대응하려면 vm.$watch()를 사용해야 합니다. DOM 이벤트를 지연시키려면 디바운스 필터를 사용해야 합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다.

Vue.js에서 매일 배워야 할 폼 컨트롤 바인딩 관련 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!