Vue.JS入門教學之處理表單-js教程-PHP中文網

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

高洛峰

發布： 2016-12-03 10:32:51

原創

1253 人瀏覽過

本文實例為大家分享了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}}

登入後複製

惰性更新
預設情況下，v-model 會在每個input 事件之後同步輸入的數據。你可以加入一個 lazy 特性，將其改為在 change 事件之後才進行同步。

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

登入後複製

轉換為數字
如果你希望將使用者的輸入自動轉換為數字，你可以在 v-model 所在的 input 上加入一個 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選項
當你需要為一個

在你的資料裡，myOptions 應該是一個指向選項陣列的路徑或是表達式。
這個可選的陣列可以包含簡單的陣列：

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

或是可以包含格式如{text:'', value:''} 的對象。這個物件格式允許你設定可選項，讓文字顯示不同於背後的值：

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>

登入後複製

會被渲染成為

[
{ 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>

登入後複製

是{label:'', options:[...]}。這樣的資料會被渲染成為一個：

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>

登入後複製

2.選項過濾

你的原始資料很有可能不是這裡所要求的格式，因此在動態產生選項時必須進行一些資料轉換。為了簡化這種轉換，options特性支援過濾器。將資料的轉換邏輯做成一個可重複使用的自訂過濾器通常來說是個好主意：

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

登入後複製

上述過濾器將像[{ name: 'Bruce' }, { name: 'Chuck' }] 這樣的原始資料轉化為['Bruce', 'Chuck']，從而符合動態選項的格式要求。

3.靜態預設選項

除了動態產生的選項之外，你還可以提供一個靜態的預設選項：

rrreee

基於 users 動態產生的後面選項將會被加入到這個靜態選項後面。如果 v-model 的綁定值為 0 之外的偽值，則會自動選取該預設選項。

輸入debounce

在一次輸入被同步到模型之前，debounce 特性允許你設定一個每次使用者事件後的等待延遲。如果在這個延遲到期之前用戶再次輸入，則不會立刻觸發更新，而是重置延遲的等待時間。當你每次更新前要執行繁重作業時會很有用，例如一個基於 ajax 的自動補全功能。有效的減少重複無用的提交

注意debounce 參數並不對用戶的輸入事件進行debounce：它只對底層資料的「寫入」操作起作用。因此當使用 debounce 時，你應該用 vm.$watch() 而不是 v-on 來回應資料變化。

以上就是本文的全部內容，希望對大家的學習有所幫助

🎜