집 > 기사 > 웹 프론트엔드 > 양식 처리를 위한 Vue.JS 입문 튜토리얼

양식 처리를 위한 Vue.JS 입문 튜토리얼

高洛峰원래의: 2016-12-03 10:32:511213검색

이 글의 예시는 참고용으로 Vue.JS 양식 처리 관련 내용을 공유합니다. 구체적인 내용은 다음과 같습니다

기본 사용법

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<form id="demo">
 <!-- text -->
 <p>
  <input type="text" v-model="msg">
  {{msg}}
 </p>
 <!-- checkbox -->
 <p>
  <input type="checkbox" v-model="checked">
  {{checked ? "yes" : "no"}}
 </p>
 <!-- radio buttons -->
 <p>
  <input type="radio" name="picked" value="one" v-model="picked">
  <input type="radio" name="picked" value="two" v-model="picked">
  {{picked}}
 </p>
 <!-- select -->
 <p>
  <select v-model="selected">
   <option>one</option>
   <option>two</option>
  </select>
  {{selected}}
 </p>
 <!-- multiple select -->
 <p>
  <select v-model="multiSelect" multiple>
   <option>one</option>
   <option>two</option>
   <option>three</option>
  </select>
  {{multiSelect}}
 </p>
 <p><pre class="brush:php;toolbar:false">data: {{$data | json 2}}

Lazy update
기본적으로 v-model은 각 입력 이벤트 후에 입력 데이터를 동기화합니다. 지연 속성을 추가하여 변경 이벤트 이후에만 동기화하도록 변경할 수 있습니다.

<!-- 在 "change" 而不是 "input" 事件触发后进行同步 -->
<input v-model="msg" lazy>

숫자로 변환
사용자의 입력을 숫자로 자동 변환하려면 v-model이 있는 입력에 숫자 속성을 추가하면 됩니다. 테스트가 성공하지 못했습니다. 이유를 모르겠습니다

bc3a745ade46aea43913a82bbd8501d0

바인딩 표현식
라디오 선택 상자와 확인란을 사용할 때 바인딩된 값은 부울 값 또는 문자열일 수 있습니다.

<!-- toggle 是 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当单选框被选中时 pick 是 "red" -->
<input type="radio" v-model="pick" value="red">

여기에는 작은 제한이 있습니다. 때로는 그 뒤에 있는 값을 On에 바인딩하고 싶을 때도 있습니다. . 다음 예에 따라 구현할 수 있습니다.

1. 확인란

<input type="checkbox" v-model="toggle" true-exp="a" false-exp="b">
// 被选中时：
vm.toggle === vm.a
// 被取消选中时：
vm.toggle === vm.b

2. 라디오 버튼

<input type="radio" v-model="pick" exp="a">
// 被选中时：
vm.pick === vm.a

동적 선택 옵션
221f08282418e2996498697df914ce4e 요소에 대한 목록 옵션을 동적으로 렌더링해야 하는 경우 옵션이 동적으로 변경될 때 v-model 지시어와 함께 options 속성을 사용하는 것이 좋습니다. -모델이 정확함 동기화:

e57d50fce680466b479a2f32cc4092cc18bb6ffaf0152bbe49cd8a3620346341

데이터에서 myOptions는 다음과 같아야 합니다. 옵션 배열을 가리키는 경로 또는 표현식이어야 합니다.
이 선택적 배열은 간단한 배열을 포함할 수 있습니다:

options = ['a', 'b', 'c']

또는 다음과 같은 형식을 포함할 수 있습니다. 텍스트:'', 값:''} 개체. 이 개체 형식을 사용하면 텍스트가 기본 값과 다르게 표시되도록 옵션을 설정할 수 있습니다.

options = [
 { text: &#39;A&#39;, value: &#39;a&#39; },
 { text: &#39;B&#39;, value: &#39;b&#39; }
]

은

<select>
 <option value="a">A</option>
 <option value="b">B</option>
</select>

으로 렌더링됩니다.

1. 옵션 그룹
또한 배열의 개체 형식은 {label:'', options:[...]} 일 수도 있습니다. . 이러한 데이터는 5b7a15bed8615d1b843806256bebea72으로 렌더링됩니다:

[
{ label: &#39;A&#39;, options: [&#39;a&#39;, &#39;b&#39;]},
{ label: &#39;B&#39;, options: [&#39;c&#39;, &#39;d&#39;]}
]
<select>
<optgroup label="A">
 <option value="a">a</option>
 <option value="b">b</option>
</optgroup>
<optgroup label="B">
 <option value="c">c</option>
 <option value="d">d</option>
</optgroup>
</select>

2. 옵션 필터링
원본 데이터는 여기에 필요한 형식이 아닐 가능성이 높습니다. 이므로 옵션을 동적으로 생성할 때 일부 데이터 변환을 수행해야 합니다. 이 변환을 단순화하기 위해 옵션 속성은 필터를 지원합니다. 일반적으로 데이터 변환 논리를 재사용 가능한 사용자 정의 필터로 만드는 것이 좋습니다.

Vue.filter(&#39;extract&#39;, function (value, keyToExtract) {
return value.map(function (item) {
 return item[keyToExtract]
})
})
<select
v-model="selectedUser"
options="users | extract &#39;name&#39;">
</select>

위 필터는 [ 원시 데이터는 { name: 'Bruce' }, { name: 'Chuck' }]는 ['Bruce', 'Chuck']로 변환되므로 동적 옵션의 형식 요구 사항을 준수합니다.

3. 정적 기본 옵션
동적으로 생성된 옵션 외에도 정적 기본 옵션을 제공할 수도 있습니다.

<select v-model="selectedUser" options="users">
<option value="">Select a user...</option>
</select>

이 정적 옵션 뒤에는 사용자를 기반으로 동적으로 생성된 옵션이 추가됩니다. 이 기본 옵션은 v-model의 바인딩 값이 0이 아닌 더미 값인 경우 자동으로 선택됩니다.

입력 디바운스
디바운스 기능을 사용하면 각 사용자 이벤트 후 입력이 모델에 동기화되기 전에 지연을 설정할 수 있습니다. 이 지연이 만료되기 전에 사용자가 다시 입력하면 업데이트가 즉시 실행되지 않지만 지연 대기 시간이 재설정됩니다. 이는 ajax 기반 자동 완성 기능과 같이 각 업데이트 전에 무거운 작업을 수행하려는 경우에 유용합니다. 불필요한 중복 제출을 효과적으로 줄입니다

82ddc4b28363de60a9d851e978fbb3a6
디바운스 매개변수는 사용자 입력 이벤트를 디바운싱하지 않으며 기본 데이터만 디바운스합니다. "쓰기" 작업이 작동합니다. 따라서 디바운스를 사용할 때는 v-on 대신 vm.$watch()를 사용하여 데이터 변경에 대응해야 합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다

성명：

이전 기사：Vue.JS 입문 튜토리얼 목록 렌더링다음 기사：Vue.JS 입문 튜토리얼 목록 렌더링

양식 처리를 위한 Vue.JS 입문 튜토리얼

관련 기사