基本的な使用法
V-Modelディレクティブを使用して、フォーム制御要素を双方向のデータバインディングを作成できます。コントロールタイプに従って要素を更新する正しい方法を自動的に選択します。少し魔法のようですが、Vモデルは構文砂糖に他なりません。ユーザー入力イベントのデータの更新、特にいくつかの極端な例を処理します。
文章
<span>メッセージは：{{message}} </span> <br> <入力型= "v-model =" message "placeholder =" edit me ">チェックボックス
単一のチェックボックス、論理値：
<入力型= "チェックボックス" id = "チェックボックス" v-model = "checked"> <label for = "checkbox"> {{checked}} </label>同じ配列にバインドされた複数のチェックボックス：
<入力タイプ= "チェックボックス" ID = "Jack" value = "jack" v-model = "checkednames"> <label for = "jack"> jack </label> <入力タイプ= "チェックボックス" id = "john" value = "john" v-model = "checkednames"> <label for = "john"> john </labe> <input "mike" mike "mike" mike "mike" mike "mike" mike "mike" v-model = "checkednames"> <label for = "mike"> mike </label> <br> <span> checked名：{{checkedNames | json}} </span> new Vue（{el： '...'、data：{checkedNames：[]}}）無線
<入力タイプ= "Radio" id = "1つの" value = "1つの" v-model = "picked"> <label for = "one"> one </label> <br> <input type = "radio" id = "2" value = "2" v-model = "picked"> <ラベル= "2"> 2つのラベル> <br> <span>
選択します
単一の選択：
<v-model = "selected"> <option selected> a </option> <option> b </option> <option> c </option> </select> <span> selected：{{selected}} </span>複数選択（配列にバインド）：
<select v-model = "selected" multised "multised> <option selected> a </option> <option> b </option> <option> c </option> </select> <br> <span> selected：{{selected | json}} </span>動的なオプション、v-forでレンダリング：
<select v-model = "selected"> <option v-for = "option in options" v-bind：value = "option.value"> {{option.text}} </option> </select> <span> selected：{{selected}} </span> new Vue（{el： '...'、data：{selected： 'a'、options：[{text： 'one'、value： 'a'}、{text： 'two'、balue： 'b'}、{text： 'three'、value： 'c'}}}））））バインド値
ラジオボタン、チェックボックス、ボックスオプションの場合、V-Modelにバインドされた値は通常、静的文字列（チェックボックスの論理値）です。
<！ - 選択した場合、「ピックド」は文字列 "a" - > <input type = "radio" v-model = "picked" value = "a"> <！ - `トグル`はtrueまたはfals-> <入力タイプ= "チェックボックス" v-model = "gmodel ="トグル "> <！ - 選択されたとき、` selected` is "abc"> < value = "abc"> abc </option> </select>
ただし、V-Bindを使用して実装できるVueインスタンスの動的プロパティに値をバインドする場合があり、このプロパティの値は文字列ではない場合があります。
チェックボックス
<入力型= "チェックボックス" v-model = "トグル" v-bind：true-value = "a" v-bind：false-value = "b"> //
無線
<入力型= "Radio" v-model = "pick" v-bind：value = "a"> //
[オプション]を選択します
<select v-model = "selected"> <！ - オブジェクトリテラル - > <option v-bind：value = "{number：123}"> 123 </option> </select> // selected typeof vm.selected //-> 'object'vm.selected.number //-> 123パラメーター特性
怠け者
デフォルトでは、V-Modelは入力イベントの入力ボックス値とデータを同期します。変更イベントで同期する怠zyな機能を追加できます。
<！ - 「入力」イベントの代わりに「変更」で更新 - >
<入力v-model = "msg" lazy>
番号
ユーザーの入力を数値に自動的に変換する場合（元の値の変換結果がNANの場合は元の値に戻ります）、機能番号を追加できます。
<入力v-model = "age"番号>
デバウンス
Debounceは最小の遅延を設定し、各タップ後に入力ボックスの値とデータを遅らせます。アップデートごとに大量の操作を実行する必要がある場合に役立ちます（入力プロンプトのAJAXリクエストなど）。
<入力v-model = "msg" debounce = "500">
Debounceパラメーターは、入力イベントを遅らせないことに注意してください。基礎となるデータの「書き込み」を遅らせることに注意してください。したがって、debounceを使用する場合、vm。$ watch（）を使用して、データの変更に応答する必要があります。 DOMイベントを遅らせる場合は、Debounceフィルターを使用する必要があります。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。