vuejsの道--v-modelフォームバインド

3762 ワード

vuejsとフォーム要素の間の双方向バインドはv-modelによって実現されます.もちろんフォームには多くの要素がありますが、次は異なるフォーム要素の間でどのように双方向バインドを実現しているのかを見てみましょう.
データ・バインディング-1行テキスト


       :{{datas}}

従来の入力ボックスレンチバインドは、これ以上説明しない.
データバインド複数行テキスト

          ：{{message}}
		{{mes}}//textearea     v-model

はテキストドメインにバインドされていますが、上記の例では将来、テキストドメインに{{mes}}が表示されるのか、それともmessageが表示されるのかを発見するかもしれません.実は答えはmessageで、結局フォームの要素なので、ははは!
チェックボックス:単一の論理値


		{{checked}}//checked              ，   true  false

単一チェックボックスをバインドする場合v-modelの値はブール値(論理値)であるべきで、値がtrueの場合は自動的にチェックアウトし、falseの場合はチェックアウトをキャンセルし、双方向バインドなので手動でクリックする場合も、チェックアップ値はtrueになり、チェックアップ値がfalseにならない場合はfalseになります.
複数のチェックボックスをバインド


		jack 
		
		many
		
		andy
		

		  checkARR ：{{checkARR}}//checkARR     ，                    value

は、選択された内容に応じて変化します.複数の値は、将来的には配列の形式に違いありませんが、どう表現しますか??ははは
ラジオ・ボックスのバインド


		weaaa
		

		
		sasasasasa
		

		{{abs}}//abs        radio    value

ラジオボックスをバインドするとき、バインドされた値は選択した値のvalueの変化に伴って変化します.逆に、事前に初期値を設定した場合、vuejsはバインドされたラジオボックスのvalue値に一致し、一致した場合、選択されます.そうしないと選択されません.
ラジオ・リストのバインド


		

		    ：{{select}}
//select          option    value

ラジオリストをバインドするとき(ドロップダウンボックス)、実際にはあなたが選択したどのoptionに基づいて、それからあなたがバインドしたテンプレートに対応する値はあなたが選択したそのoptionのvalueです.
複数選択リストのバインド


		
		

		     {{select2}}
//select2          option    [value]，         ，

マルチ選択リストをバインドする場合、そのバインドは配列であり、テンプレートの値は選択したoptionに対応するvalue値であり、構成された配列[]である.
バリューのバインド
実は以前からv-bindでvalue値をバインドできることを知っていましたが、ここでvalueをバインドするのは主にckeckbox、radio、selectなどあなたがバインドしたテンプレートの値とValueの値との関係を説明しています.実は前に明らかにしました.checkにとって、当選中のとき、あなたがバインドしたテンプレートの値はtrueかfalseかです.radioに対してバインドされたテンプレートの値は、あなたが選択したradioのvalue値であり、ラジオリストに対しても同様であり、バインドされたテンプレートの値は、あなたが選択したオプション(option)に対応するvalue値である.
もう一つ特殊なのは、typeがcheckboxの場合:バインドされたテンプレートの値はtrueまたはfalseとは限らない.この時点で指定されているからだ.--

JS部

var vm = new Vue({
			el:"#container",
			data:{
				strings:"  ",
				class1:"fontColor",
				radioVal:"       ",
				select:"   ",
				weekly:"haha",
				dataobj:{
					trueV:"  ",
					falseV:"   "
				}
			}
		})

この時点で当選した場合、バインドされたテンプレートselectの値は「帰宅」、選択されていない場合は「帰宅しない」です.
v-modelの修飾子:
1..Lazyは入力ボックスの値とデータの同期方式を変更し、元のinput(入力しながら同期)イベントからchange(入力完了同期)イベントに変更する.2..numberは、ユーザが入力した値をNumberタイプに変換することができる.3..trimはユーザーが入力した先頭と末尾のスペースをフィルタします.4.これらの修飾子は直列に接続できる

レコード-vueでsettimeoutを使用して、現在のルーティングsettimeoutから破棄されていない問題

apache rewriteモジュールの追加