Terdapat tiga perkara utama yang akan dikuasai apabila memproses bentuk Vue: 1. Gunakan model V untuk mencapai data bentuk dua hala yang mengikat dan menyegerakkan data; 2. Melaksanakan logik pengesahan untuk memastikan pematuhan input; 3. Kawal tingkah laku penyerahan dan permintaan proses dan maklum balas status. Dalam Vue, elemen bentuk seperti kotak input, kotak semak, dan lain-lain boleh terikat kepada atribut data melalui model V. Untuk , input pengguna boleh disegerakkan secara automatik; Untuk pelbagai senario pemilihan kotak semak, medan mengikat harus dimulakan ke dalam array untuk menyimpan beberapa nilai yang dipilih dengan betul. Pengesahan borang boleh dilaksanakan melalui fungsi tersuai atau perpustakaan pihak ketiga. Amalan umum termasuk memeriksa sama ada bidang itu kosong, menggunakan format pengesahan biasa, dan memaparkan maklumat segera apabila kesilapan salah; Sebagai contoh, menulis kaedah ValidateForm untuk mengembalikan objek mesej ralat setiap bidang. Apabila mengemukakan, @submit.Prevent harus digunakan untuk menyekat tingkah laku lalai, dan melakukan operasi seperti data pembersihan, menghantar permintaan, respons pemprosesan, dan lain -lain; Adalah disyorkan untuk menetapkan semula keseluruhan objek borang dan bukannya membersihkannya satu demi satu, dan melumpuhkan butang semasa proses penyerahan untuk mengelakkan penyerahan berulang, dan memaparkan arahan yang sepadan berdasarkan hasil antara muka.

Borang pengendalian di Vue tidak rumit, tetapi untuk menjadi jelas dan praktikal, terdapat beberapa perkara penting untuk memberi perhatian kepada. Sistem responsif Vue menjadikan operasi bentuk mudah dan intuitif. Selagi anda menguasai pautan pengikatan data, pengesahan dan penyerahan, anda pada dasarnya boleh menangani kebanyakan senario.

Mengikat dua hala adalah asas

Di Vue, cara yang paling biasa adalah menggunakan v-model untuk mencapai pengikatan dua hala antara elemen dan data. Sebagai contoh, kotak input dan kotak pemilihan drop-down boleh digunakan untuk menyegerakkan nilai ke dalam data secara langsung melalui v-model

Contohnya:

 <input v-model = "formdata.name" placeholder = "Nama Anda">

Dengan cara ini, formData.name akan dikemas kini secara automatik apabila pengguna memasuki kandungan. Sebaliknya, jika anda mengubah suai medan ini dalam kod, kandungan kotak input juga akan berubah.

Logik yang sama adalah sama untuk kotak semak atau butang radio, hanya perhatikan sama ada jenis data terikat. Sebagai contoh, lebih baik menggunakan array untuk menyimpan nilai yang dipilih apabila memilih pelbagai pilihan:

 <input type = "checkbox" value = "Apple" v-Model = "Fruits"> Apple <input type = "checkbox" value = "Banana" v-Model = "Fruits"> Banana

Pada masa ini, fruits harus dimulakan ke dalam array kosong, dan pengguna secara automatik akan menambah nilai kepadanya setelah menyemaknya.

Bagaimana cara membuat pengesahan borang boleh dipercayai?

Mengikat sahaja tidak mencukupi. Dalam pembangunan sebenar, adalah perlu untuk mengesahkan sama ada input pengguna memenuhi keperluan. Anda boleh menulis logik penghakiman anda sendiri, atau menggunakan beberapa perpustakaan siap sedia, seperti Vuelidate atau Veevalidate .

Walau bagaimanapun, walaupun untuk pengesahan tulisan tangan, terdapat beberapa amalan biasa:

• Periksa sama ada setiap medan kosong sebelum menghantar
• Sahkan peti mel, telefon dan format lain menggunakan ungkapan biasa
• Beri mesej ralat supaya pengguna mengetahui apa yang salah

Sebagai contoh, anda boleh menulis fungsi pengesahan mudah seperti ini:

 ValidateForm () {
  ralat const = {};
  jika (! this.formdata.name) {
    errors.name = 'Nama tidak boleh kosong';
  }
  jika (! this.formdata.email.includes ('@')) {
    errors.email = 'Sila masukkan alamat e -mel yang betul';
  }
  kesilapan pulangan;
}

Kemudian panggilnya apabila menyerahkannya, dan jika terdapat ralat, ia akan dipaparkan.

Jangan lupa dua perkara ini semasa menghantar borang

Apabila anda menambah @submit.prevent ke borang, anda boleh menyekat tingkah laku penyerahan lalai dan melaksanakan logik anda sendiri. Kunci langkah ini ialah:

• Bersihkan data (seperti mengeluarkan ruang sebelum dan selepas)
• Hantar permintaan (biasanya menggunakan axios atau mengambil)
• Mengendalikan situasi yang berjaya atau gagal

Berikut adalah beberapa perkara yang perlu diperhatikan:

• Kosongkan borang selepas penyerahan? Ingatlah untuk menetapkan semula keseluruhan objek dan bukannya tugasan medan
• Lumpuhkan butang semasa penyerahan untuk mengelakkan penyerahan berulang
• Sekiranya antara muka mengembalikan ralat, paparkan petikan yang sepadan

Contoh:

 <form @hantar.prevent = "hantarForm">
  <!-item input lain->
  <butang: disabled = "issubmitting"> hantar </butang>
</form>

Pada dasarnya itu sahaja. Pemprosesan borang nampaknya mudah, tetapi jika butirannya tidak dilakukan dengan betul, mudah untuk menimbulkan masalah. Dengan menguasai pengikatan data, logik pengesahan dan proses penyerahan, anda boleh menulis fungsi bentuk yang stabil dan terawat dengan baik.

Atas ialah kandungan terperinci Cara Mengendalikan Borang di Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!