Artikel ini adalah tutorial terperinci dengan kode yang lebih rinci yang disusun oleh editor dalam kombinasi dengan dokumen resmi. Sangat cocok untuk dipelajari pemula. Teman yang tertarik bisa melihatnya!
Informasi berasal dari dokumen resmi:
http://cn.vuejs.org/guide/forms.html
Bentuk ikatan
① Metode Binding Umum:
【1】 Ikatan kotak input teks;
【2】 pengikat textarea (mirip dengan [1]);
【3】 Radio Ikatan Nilai Terpilih;
【4】 binding kotak (array bundel secara otomatis, tidak ada nama yang diperlukan);
【5】 Pilih Ikatan;
【6】 Pilih beberapa binding kotak centang beberapa pilihan;
【7】 Ikatan dinamis (tipe di atas tetapi nilai yang sama dapat berinteraksi);
[8] Kotak centang yang dipilih dan tidak dicentang diberi nilai yang berbeda (terutama untuk keadaan yang tidak dicentang);
【9】 Kotak centang, radio, pilih nilai yang dipilih secara dinamis mengikat (terutama mengacu pada objek pengikat dinamis nilai atau atribut dari instance VM, seperti atribut tertentu dalam data, atau nilai tertentu dari yang dihitung);
Sebagai kode:
<div id = "app"> <input type = "text" v-Model = "Text"/> <div> {{text}} </div> <div> - ―6666666 secara ―66666666666 ACOD ―66666666666 ACOAL ―66666666666 ACO value="firstCheckbox" v-model="checkboxes">firstCheckbox</label><br/> <label><input type="checkbox" value="secondCheckbox" v-model="checkboxes">secondCheckbox</label><br/> <label><input type="checkbox" value="thirdCheckbox" v-model="checkboxes">thirdCheckbox</label><br/> <verv> Nilai yang dipilih di atas adalah: {{centang kotak}} </div> <div> Nilai yang dipilih di atas adalah (ditampilkan dalam format JSON, filter json digunakan di sini): {{centang Kotak | JSON}} </div> <div> ―6 ―6 { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ― ~ {{~ {~ {~ {{{{{{{{{{{{~ {~ {~ {~ ~ {~ ~ {~ ~ {~ ~ {JSOCION " v-Model = "Radio"/> nilai = a </label> <br> <label> <input type = "radio" value = "b" v-Model = "Radio"/> value = B </label> <br> <v div> {{Radio}} </Div> <Div> Perhatikan bahwa nilai V-Model harus di sini akan terdaftar di dalam data, jika tidak akan ada dalam data yang akan terdaftar di sini, jika tidak ada dalam data yang akan terdaftar dalam data, jika tidak ada dalam data yang akan terdaftar dalam data, jika tidak ada dalam data, jika tidak ada dalam data yang akan dicatatkan dalam data, jika tidak ada dalam data, <dv> ―6 ―6 kata "―6666600--</div> <pilih V-Model =" SELECT "> <Opsi> Nilai default, opsi tidak menetapkan nilai </tiption> <option value =" b "> Nilai nilai yang disetel ke </option> </option> Pilihan {Pilihan {Pilihan {Pilihan> Pilihan Jika Anda tidak mendaftar di sini, Anda akan dilaporkan ke kesalahan </div> <div> - ―66666666 ACE ―66666666 secara - - - - - - " - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - berdisi A S ac) - - - - berkata - - - - - - berdur value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <div>The value selected in multiple selection is: {{multiple}}</div> <div>Note that this multi-select select box is the default scroll bar with Y-AXIS </SIV> <div> ―6 ―6 secara ―666666 secara <label> <input type = "centang kotak" value = "b" v-model = "dinamis"> b </label> <br/> <label> <input type = "centang kotak" value = "c" v-model = "Dynamic"> C </label> <br/> <pilih V-Model = "Dynamic" Multiple "Multipe> Opsi </a </a </opsi </Opsi </Opsi B </Opsi </Opsi </Opsi B" value = "c"> c </pection> </tect> <verv> pilih adalah: {{dynamic}} </div> <verv> ―6 ―600 {―6 ―6 ―6 ―6 v-bind:true-value="differentValues.t" v-bind:false-value="differentValues.f" v-model="different">true/false</label><br/> <div>Different value: {{different}}</div> <div>Note that the above cannot be used as an array as a variable for multiple checkbox v-models like ordinary checkboxes, and its value is a certain property of the instance mengikat dan VM; therefore, the value in v-bind cannot be a string, but it can be an object, such as {a:1} (of course, the value displayed at this time is also an object) </div> <div>――――――――――――――</div> <div>Customized radio</div> <label><input type="radio" v-bind:value="text" v-model="customize"/> value is 1 </LABEL> <LABEL> <INPUT TYPE = "RADIO" V-BIND: Value = "TextArea" V-Model = "Kustomisasi"/> Nilai adalah 1 </label> <div> {{customize}} </div> <div> Demikian pula, nilainya dapat berupa properti VM atau objek, dan pilih juga valid. (Tiga utama dipilih. Selain itu, meskipun tipe tanggal juga dipilih, tidak terlalu bermakna) </div> <div> ―666666666AN </SEV> ―6 - ―6 ―6 {'{{~ {~ {~ {{~ {{{{{{{{{{{{{{{{{{{{{{new> baru ({ne baru ({ne baru. TextArea: di sini adalah teks multi-line/n, // n adalah garis baru, tetapi ditampilkan sebagai ruang dalam string ".②Add Parameter:
【1】 Malas
Nilai diperbarui hanya setelah status fokus dibatalkan, daripada ketika kunci ditekan.
Valid untuk kedua kotak input teks dan tekstara
Sebagai kode:
<input type = "text" v-Model = "Text" Lazy/> <verv> {{text}} </div>【2】 Nomor
Secara otomatis mengonversi nilai input ke tipe angka, dan jika dikonversi ke tipe NAN, itu akan kembali ke nilai asli;
Sebagai kode:
<input type = "text" v-Model = "Text" Number/> <div> {{{text}} </div> <verv> {{typeof Text}} </div>Jika nomor parameter ditambahkan, maka saat memasukkan angka, tipe prompt adalah string. Setelah menambahkannya, nomor murni akan meminta jenis angka;
【3】 debounce = "milidetik"
Ketika nilai tidak berubah selama beberapa milidetik dalam satu baris, perubahan nilai variabel dipicu;
Sebagai kode:
<input type = "text" v-Model = "Text" debounce = "1000"/> <verv> {{text}} </div>Ketika saya memasukkan enam angka 1, 2, 3, 4, 5, 6 secara berurutan dengan perbedaan waktu 500ms, nilai teks tidak akan diperbarui;
Ketika saya berhenti memasukkan memiliki 1000ms, nilai teks akan diperbarui;
Oleh karena itu, cocok untuk operasi konsumsi tinggi seperti AJAX.
Di atas adalah contoh analisis vuej dan contoh elemen bentuk yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!