快捷導(dǎo)航

Vue.JS入門教程之處理表單

更新時(shí)間：2016年12月01日 09:59:35 作者：huton

這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之處理表單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue.JS表單處理的相關(guān)內(nèi)容，供大家參考，具體內(nèi)容如下

基本用法

<!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>data: {{$data | json 2}}</pre></p>
</form>
<script>
 new Vue({
  el: '#demo',
  data: {
   msg  : 'hi!',
   checked : true,
   picked : 'one',
   selected : 'two',
   multiSelect: ['one', 'three']
  }
 });

</script>
</body>
</html>

惰性更新
默認(rèn)情況下，v-model 會(huì)在每個(gè) input 事件之后同步輸入的數(shù)據(jù)。你可以添加一個(gè) lazy 特性，將其改變?yōu)樵?change 事件之后才進(jìn)行同步。

<!-- 在 "change" 而不是 "input" 事件觸發(fā)后進(jìn)行同步 -->
<input v-model="msg" lazy>

轉(zhuǎn)換為數(shù)字
如果你希望將用戶的輸入自動(dòng)轉(zhuǎn)換為數(shù)字，你可以在 v-model 所在的 input 上添加一個(gè) number 特性。沒有試驗(yàn)成功，不知道什么原因

綁定表達(dá)式
當(dāng)使用 v-model 在單選框和復(fù)選框時(shí)，被綁定的值可以是布爾值或字符串：

<!-- toggle 是 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 當(dāng)單選框被選中時(shí) pick 是 "red" -->
<input type="radio" v-model="pick" value="red">

這里有一點(diǎn)小的局限性——有的時(shí)候我們想把背后的值綁定到一些別的東西上。你可以按下面這個(gè)例子實(shí)現(xiàn)：

1.復(fù)選框

<input type="checkbox" v-model="toggle" true-exp="a" false-exp="b">
// 被選中時(shí)：
vm.toggle === vm.a
// 被取消選中時(shí)：
vm.toggle === vm.b

2.單選框

<input type="radio" v-model="pick" exp="a">
// 被選中時(shí)：
vm.pick === vm.a

動(dòng)態(tài)select選項(xiàng)
當(dāng)你需要為一個(gè) <select> 元素動(dòng)態(tài)渲染列表選項(xiàng)時(shí)，推薦將 options 特性和 v-model 指令配合使用，這樣當(dāng)選項(xiàng)動(dòng)態(tài)改變時(shí)，v-model 會(huì)正確地同步：

在你的數(shù)據(jù)里，myOptions 應(yīng)該是一個(gè)指向選項(xiàng)數(shù)組的路徑或是表達(dá)式。
這個(gè)可選的數(shù)組可以包含簡(jiǎn)單的數(shù)組：

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

或者可以包含格式如 {text:'', value:''} 的對(duì)象。該對(duì)象格式允許你設(shè)置可選項(xiàng)，讓文本展示不同于背后的值：

options = [
 { text: 'A', value: 'a' },
 { text: 'B', value: 'b' }
]

會(huì)被渲染成為

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

1.選項(xiàng)組
另外，數(shù)組里對(duì)象的格式也可以是 {label:'', options:[...]}。這樣的數(shù)據(jù)會(huì)被渲染成為一個(gè) <optgroup>：

[
{ label: 'A', options: ['a', 'b']},
{ label: 'B', options: ['c', 'd']}
]
<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.選項(xiàng)過濾
你的原始數(shù)據(jù)很有可能不是這里所要求的格式，因此在動(dòng)態(tài)生成選項(xiàng)時(shí)必須進(jìn)行一些數(shù)據(jù)轉(zhuǎn)換。為了簡(jiǎn)化這種轉(zhuǎn)換，options特性支持過濾器。將數(shù)據(jù)的轉(zhuǎn)換邏輯做成一個(gè)可復(fù)用的自定義過濾器通常來說是個(gè)好主意：

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

上述過濾器將像 [{ name: 'Bruce' }, { name: 'Chuck' }] 這樣的原始數(shù)據(jù)轉(zhuǎn)化為 ['Bruce', 'Chuck']，從而符合動(dòng)態(tài)選項(xiàng)的格式要求。

3.靜態(tài)默認(rèn)選項(xiàng)
除了動(dòng)態(tài)生成的選項(xiàng)之外，你還可以提供一個(gè)靜態(tài)的默認(rèn)選項(xiàng)：

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

基于 users 動(dòng)態(tài)生成的選項(xiàng)將會(huì)被添加到這個(gè)靜態(tài)選項(xiàng)后面。如果 v-model 的綁定值為除 0 之外的偽值，則會(huì)自動(dòng)選中該默認(rèn)選項(xiàng)。

輸入debounce
在一次輸入被同步到模型之前，debounce 特性允許你設(shè)置一個(gè)每次用戶事件后的等待延遲。如果在這個(gè)延遲到期之前用戶再次輸入，則不會(huì)立刻觸發(fā)更新，而是重置延遲的等待時(shí)間。當(dāng)每次更新前你要執(zhí)行繁重作業(yè)時(shí)會(huì)很有用，例如一個(gè)基于 ajax 的自動(dòng)補(bǔ)全功能。有效的減少重復(fù)無用的提交

<input v-model="msg" debounce="500">
注意 debounce 參數(shù)并不對(duì)用戶的輸入事件進(jìn)行 debounce：它只對(duì)底層數(shù)據(jù)的 “寫入” 操作起作用。因此當(dāng)使用 debounce 時(shí)，你應(yīng)該用 vm.$watch() 而不是 v-on 來響應(yīng)數(shù)據(jù)變化。

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: