本文實例為大家分享了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>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>
惰性更新
默認情況下,v-model 會在每個 input 事件之後同步輸入的數據。你可以添加一個 lazy 特性,將其改變為在 change 事件之後才進行同步。
<!-- 在 "change" 而不是 "input" 事件觸發後進行同步 --> <input v-model="msg" lazy>
轉換為數字
如果你希望將用戶的輸入自動轉換為數字,你可以在 v-model 所在的 input 上添加一個 number 特性。沒有試驗成功,不知道什麼原因
<input v-model="age" number>
綁定表達式
當使用 v-model 在單選框和復選框時,被綁定的值可以是布爾值或字符串:
<!-- toggle 是 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 當單選框被選中時 pick 是 "red" --> <input type="radio" v-model="pick" value="red">
這裡有一點小的局限性——有的時候我們想把背後的值綁定到一些別的東西上。你可以按下面這個例子實現:
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
動態select選項
當你需要為一個 <select> 元素動態渲染列表選項時,推薦將 options 特性和 v-model 指令配合使用,這樣當選項動態改變時,v-model 會正確地同步:
<select v-model="selected" options="myOptions"></select>
在你的數據裡,myOptions 應該是一個指向選項數組的路徑或是表達式。
這個可選的數組可以包含簡單的數組:
options = ['a', 'b', 'c']
或者可以包含格式如 {text:'', value:''} 的對象。該對象格式允許你設置可選項,讓文本展示不同於背後的值:
options = [ { text: 'A', value: 'a' }, { text: 'B', value: 'b' } ]
會被渲染成為
<select> <option value="a">A</option> <option value="b">B</option> </select>
1.選項組
另外,數組裡對象的格式也可以是 {label:'', options:[...]}。這樣的數據會被渲染成為一個 <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.選項過濾
你的原始數據很有可能不是這裡所要求的格式,因此在動態生成選項時必須進行一些數據轉換。為了簡化這種轉換,options特性支持過濾器。將數據的轉換邏輯做成一個可復用的 自定義過濾器 通常來說是個好主意:
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' }] 這樣的原始數據轉化為 ['Bruce', 'Chuck'],從而符合動態選項的格式要求。
3.靜態默認選項
除了動態生成的選項之外,你還可以提供一個靜態的默認選項:
<select v-model="selectedUser" options="users"> <option value="">Select a user...</option> </select>
基於 users 動態生成的選項將會被添加到這個靜態選項後面。如果 v-model 的綁定值為除 0 之外的偽值,則會自動選中該默認選項。
輸入debounce
在一次輸入被同步到模型之前,debounce 特性允許你設置一個每次用戶事件後的等待延遲。如果在這個延遲到期之前用戶再次輸入,則不會立刻觸發更新,而是重置延遲的等待時間。當每次更新前你要執行繁重作業時會很有用,例如一個基於 ajax 的自動補全功能。有效的減少重復無用的提交
<input v-model="msg" debounce="500">
注意 debounce 參數並不對用戶的輸入事件進行 debounce:它只對底層數據的 “寫入” 操作起作用。因此當使用 debounce 時,你應該用 vm.$watch() 而不是 v-on 來響應數據變化。
本文已被整理到了《Vue.js前端組件學習教程》,歡迎大家學習閱讀。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。