フォーム処理のための Vue.JS 入門チュートリアル-jsチュートリアル-php.cn

フォーム処理のための Vue.JS 入門チュートリアル

高洛峰

リリース： 2016-12-03 10:32:51

オリジナル

1263 人が閲覧しました

この記事の例では、参考のために 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 は各入力イベントの後に同期的に入力されます。データ。遅延属性を追加して、変更イベントの後にのみ同期するように変更できます。

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

ログイン後にコピー

数値に変換
ユーザーの入力を数値に自動的に変換したい場合は、v-model が配置されている入力に数値属性を追加できます。テストは成功しませんでした。理由はわかりません

バインド式
ラジオボタンとチェックボックスで 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

ログイン後にコピー

動的選択オプション

データでは、myOptions はオプション配列を指すパスまたは式である必要があります。

このオプションの配列には、単純な配列

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

を含めることも、 {text:'', value:''} 形式のオブジェクトを含めることもできます。このオブジェクト形式を使用すると、テキスト表示がその背後の値と異なるようにオプションの項目を設定できます:

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

ログイン後にコピー

は

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

ログイン後にコピー

1 としてレンダリングされます。配列内のオブジェクトの数は {label:'', options:[...]} であることもできます。このようなデータはにレンダリングされます:

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

ログイン後にコピー

2. オプションフィルタリング

元のデータがここで必要な形式ではない可能性が高いため、動的に生成するときに何らかのデータ変換を行う必要があります。オプション。この変換を簡素化するために、options 属性はフィルターをサポートしています。通常、データ変換ロジックを再利用可能なカスタムフィルターに作成することをお勧めします:

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

ログイン後にコピー

上記のフィルターは [{ name: 'Bruce' }, { name: 'Chuck' }] のようになります。は ['Bruce', 'Chuck'] に変換されるため、動的オプションの形式要件に準拠します。

3. 静的デフォルトオプション

動的に生成されるオプションに加えて、静的デフォルトオプションを提供することもできます:

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>

ログイン後にコピー

ユーザーに基づいて動的に生成されるオプションは、この静的オプションの後に追加されます。 v-model の境界値が 0 以外のダミー値の場合、このデフォルトオプションが自動的に選択されます。

入力デバウンス

デバウンス機能を使用すると、各ユーザーイベントの後に入力がモデルに同期されるまでの待機遅延を設定できます。この遅延が期限切れになる前にユーザーが再度入力した場合、更新はすぐにはトリガーされませんが、遅延の待ち時間はリセットされます。これは、ajax ベースのオートコンプリート機能など、各更新の前に重労働を実行する場合に便利です。無駄な送信の繰り返しを効果的に削減します

debounce パラメーターはユーザーの入力イベントをデバウンスしないことに注意してください。基礎となるデータがキックインされるように「書き込む」だけです。したがって、デバウンスを使用する場合は、データ変更に応答するために v-on の代わりに vm.$watch() を使用する必要があります。

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです