この記事は、編集者が公式文書と組み合わせて編集する詳細で包括的なチュートリアルです。初心者が学ぶのに非常に適しています。興味のある友達は見ることができます！
情報は公式の文書からのものです。
http://cn.vuejs.org/guide/forms.html
フォームバインディング
①一般的な結合方法：
【1】テキスト入力ボックスバインディング。
【2】テキストアレア結合（[1]に類似）;
【3】選択された値バインディング。
【4】チェックボックスバインディング（自動的にバンドル配列、名前は不要）;
【5】バインディングを選択します。
【6】複数の選択チェックボックスバインディングを選択します。
【7】動的結合（上記のタイプですが、同じ値が相互作用できます）。
[8]選択されたチェックボックスと未チェックのチェックボックスには、異なる値が割り当てられます（主にチェックされていない状態に対して）。
Checkbox、Radio、選択した値を選択します（主にデータの特定の属性、または計算の特定の値など、VMインスタンスの値の動的バインディングオブジェクトまたは属性を指します）。
コードとして：
<div id = "app"> <input type = "text" v-model = "text"/> <div> {{text}} </div> <div> - > — - - - 、 - - 、 - 、、、、、、、、、、、、、、、、、 - - 、、、、 - - - - - - - - - - 、、、、 - 、、、、、、、、、、、、 - - 、、、、、 - 、、、、、、、、、、、、、、... value = "FirstCheckbox" v-Model = "Checkboxes"> FirstCheckbox </label> <br/> <label> <input Type = "Checkbox" value = "secondCheckbox" v-model = "Checkboxes"> <br/> <br/> <ラベル> <入力タイプ= "チェックボックス"値 "v-model =" v-model = "Checkeckbox <div>上記の選択された値は次のとおりです。{{checkboxes}} </div> <div>上記の値は（JSON形式で表示されます、JSONフィルターはここで使用されます）：{{checkboxes | json}} </div> <div> - - - - - - - - - v-Model = "Radio"/> value = a </label> <br> <label> <input type = "radio" value = "b" v-model = "v-model =" v-model = "v-model ="/> value = b </label> <br> <br> <br> <div> {{radio}} </div> <div>ここでのV-Modelの値はデータを登録する必要があることに注意してください。 <div> - - - - - - - - - - - - ... </div> <select v-model = "select"> <option>デフォルト値、オプションは値を設定しません</option> <オプション値> <オプション値> "b">値の値はbに設定されますここに登録しないでください、あなたはエラー</div>に報告されます<div> - - - - - - 、、、、、、、、、、、、、、、、 『 value = "> a </option> <option値=" b "> b </option> <option値=" c "> c </option> <option値> <option値=" d "> d </option> <option value =" e "> e </option> </select> <div>複数の選択で選択された値は{{{multipal}} y軸</div> <div> - > — - - - - - - 、、、、、、、、、、、、、、、、、、、、、、、、、... - - - - - - - - - - 、、、、、、、、、、、、、、、、、、 - - 、、、、、、、、、、、、... <label> <入力タイプ= "チェックボックス"値 "値=" b "v-model =" dynamic "> b </label> <br/> <label> <input type =" checkbox "value =" c "v-model =" dynamic "> c </label> <br/> <select v-model =" dynamic "multial> <option = </option> </option> value = "c"> c </option> </select> <div> select is：{{dynamic}} </div> <div> - - - - - - - - - - - - - - - - - - - - - </div> <div> div> <div> div> <div>選択された値のためのカスタムチェックボックス< v-bind：false-value = "differentValues.f" v-model = "differy"> true/false </label> <br/> <div>異なる値：{{div}} </div> <div>上記は、通常のチェックボックスのような複数のチェックボックスVモデルの変数としてアレイとして使用できないことに注意してください。したがって、V-bindの値は文字列になることはできませんが、{a：1}などのオブジェクトである可能性があります（もちろん、現時点で表示される値はオブジェクトです） <label> <入力タイプ= "Radio" v-bind：value = "textarea" v-model = "customize"/>値は1 </label> <div> {{customize}} </div> <div>同様に、値はVMまたはオブジェクトのプロパティであり、選択も有効です。 （メイン3が選択されます。さらに、日付タイプも選択されていますが、それはそれほど意味がありません） 「ここにマルチラインテキスト/n、// nは新しいラインですが、文字列の空間として表示されます」チェックボックス：[]、radio： ""、select： ""、倍数： ""、dynamic： ""adddパラメーター：
【1】怠zy
値は、キーが押されたときではなく、フォーカス状態がキャンセルされた後にのみ更新されます。
テキスト入力ボックスとTextareaの両方に有効です
コードとして：
<input type = "text" v-model = "text" lazy/> <div> {{text}} </div>【2】番号
入力値を数値タイプに自動的に変換し、NANタイプに変換された場合、元の値に戻ります。
コードとして：
<input type = "text" v-model = "text" number/> <div> {{text}} </div> <div> {{typeof text}} </div>パラメーター番号が追加されている場合、番号を入力するときに、プロンプトタイプは文字列です。それを追加した後、純粋な数字は数字のタイプを促します。
【3】debounce =” milliseconds”
値が数ミリ秒間連続して変更されない場合、変数の値の変更がトリガーされます。
コードとして：
<input type = "text" v-model = "text" debounce = "1000"/> <div> {{text}} </div>500msの時間差で順番に6つの番号1、2、3、4、5、6を入力すると、テキストの値は更新されません。
入力を停止すると、1000msがありますが、テキスト値が更新されます。
したがって、AJAXなどの高消費操作に適しています。
上記は、編集者が紹介したVuejsとForm Elementの例の例です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！