今回はvueフォームの使用例について詳しく説明します。vueフォームを使用する際の注意点を実際のケースで見てみましょう。 1. 基本的な使用法 v-model ディレクティブを使用して、フォーム 要素と に双方向の <p style="text-align: left;">データ バインディング<a href="http://www.php.cn/code/7876.html" target="_blank"> を作成できます。 </a></p>しかし、v-model は本質的に単なる糖衣構文です。ユーザー入力イベントをリッスンしてデータを更新し、いくつかの極端なシナリオで特別な処理を実行する役割を果たします。 <p style="text-align: left;"></p>v-model は、すべてのフォーム要素の value、checked、selected 属性の初期値を無視し、常に Vue インスタンスのデータをデータ ソースとして使用します。コンポーネントの data オプションで <p style="text-align: left;">JavaScript<a href="http://www.php.cn/wiki/48.html" target="_blank"> を介して初期値を宣言する必要があります。 </a></p>text、textarea、radio、checkbox、select の基本的な使用法を読んだ後のコードのセット: <p style="text-align: left;"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><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: '' } });ログイン後にコピー この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングな情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトです！ 推奨読書: Vue プロジェクトで発生したクロスドメインの問題を正しく解決する方法 vue-cli axios リクエスト メソッドとクロスドメイン処理の使用方法
