v-model ディレクティブを使用して、フォーム コントロール要素に双方向のデータ バインディングを作成できます。この記事では主に vue フォームの詳しい説明を紹介しますので、必要な方は参考にしてください 1. 基本的な使い方 で双方向フォームを作成するには v-model コマンドを使用します。および 要素 データ バインディング。 </p> <p>しかし、v-model は本質的に単なる糖衣構文です。ユーザー入力イベントをリッスンしてデータを更新し、いくつかの極端なシナリオに対して特別な処理を実行する役割を果たします。 </p> <p>v-model は、すべてのフォーム要素の value、checked、selected 属性の初期値を無視し、常に Vue インスタンスのデータをデータ ソースとして使用します。コンポーネントの data オプションで JavaScript を介して初期値を宣言する必要があります。 </p> <p>text、textarea、radio、checkbox、select の基本的な使用法を読んだ後のコードのセット: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"><p id="app7"> <input type="text" v-model="message"><label>{{message}}</label></br> <textarea v-model="message1">{{message1}} 单选按钮 男 女 跑步 爬山 滑雪 请选择 html javascript css {{option.text}} var app7 = new Vue({ el: '#app7', data:{ message: '单行文本', message1: '多行文本', picked: true, sex: 'boy', hobby: ['爬山','滑雪'], select: 'css', selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } });ログイン後にコピー 2. 値バインディング ラジオ ボタン、チェック ボックス、および選択リストは、単独で使用することも、または単独で使用することもできます。選択したモードでは、v-model によってバインドされる値は静的文字列またはブール値ですが、ビジネスでは、動的データをバインドする必要がある場合があります。この場合、v-bind を使用できます。 フォームで一般的に使用されるラジオ、チェックボックス、および選択の値バインディングを読み取った後のコードのセット: 单选按钮 {{picked}} {{value}} 复选框 {{toggle}} {{value1}} {{value2}} 123 {{selected.number}} var app8 = new Vue({ el: '#app8', data:{ picked: false, value: 'boy', toggle: false, value1: 'a', value2: 'b', selected: '' } });ログイン後にコピー3. 修飾子 イベント修飾子と同様に、v-model にも制御用の修飾子があります。データ同期のタイミング。 一般的に使用される修飾子、lazy、number、trim を読んだ後のコードのセット {{message}} {{typeof number}} {{text}} var app9 = new Vue({ el: '#app9', data:{ message: '', number: '', text: '' } });ログイン後にコピー 上記は、将来すべての人に役立つことを願っています。 関連記事: Ajaxにおけるブラウザとサーバー間のやり取りを詳しく解説 AJAXをゼロから学ぶためのAJAXフレームワーク AJAXをゼロから学び自動検証フォームを作る
