Saya belajar Vue dengan kursus online dan instruktur memberi saya latihan untuk membuat teks input dengan nilai default. Saya menyelesaikannya menggunakan model-v tetapi, instruktur memilih v-bind: value dan saya tidak mengerti mengapa.
Bisakah seseorang memberi saya penjelasan sederhana tentang perbedaan antara keduanya dan kapan lebih baik menggunakan masing-masing?
javascript
mvvm
frameworks
vue.js
frontend
Gustavo Dias
sumber
sumber
v-model
digunakan terutama untuk penawaran dan penawaran bentuk, jadi gunakan itu ketika Anda berurusan dengan berbagai jenis input.v-bind
direktif memungkinkan Anda untuk menghasilkan beberapa nilai dinamis dengan mengetik beberapa ekspresi JS yang dalam banyak kasus tergantung pada data dari model data - jadi pikirkan tentang v-bind sebagai arahan yang harus Anda gunakan ketika Anda ingin berurusan dengan beberapa hal dinamis.<div v-bind:class="{ active: isActive }"></div>
- Anda tidak dapat mengikat atribut html menggunakan model, Anda harus menggunakanv-bind
direktif. Untuk elemen formulir, Anda akan ingin menggunakanv-model
arahan - "itu secara otomatis memilih cara yang benar untuk memperbarui elemen berdasarkan pada tipe input."data
danprops
...Jawaban:
Dari sini - Ingat:
pada dasarnya sama dengan:
atau (sintaks singkatan):
Jadi
v-model
adalah pengikatan dua arah untuk input formulir . Ini menggabungkanv-bind
, yang membawa nilai js ke markup, danv-on:input
untuk memperbarui nilai js .Gunakan
v-model
saat Anda bisa. Gunakanv-bind
/v-on
ketika Anda harus :-) Saya harap jawaban Anda diterima.v-model
bekerja dengan semua jenis input HTML dasar (teks, textarea, angka, radio, kotak centang, pilih). Anda dapat menggunakanv-model
denganinput type=date
jika model Anda menyimpan tanggal sebagai string ISO (yyyy-mm-dd). Jika Anda ingin menggunakan objek tanggal dalam model Anda (ide yang bagus segera setelah Anda akan memanipulasi atau memformatnya), lakukan ini .v-model
memiliki beberapa kecerdasan ekstra yang perlu diperhatikan. Jika Anda menggunakan IME (banyak keyboard ponsel, atau Cina / Jepang / Korea), v-model tidak akan diperbarui sampai kata selesai (spasi dimasukkan atau pengguna meninggalkan bidang).v-input
akan menembak lebih sering.v-model
juga memiliki pengubah.lazy
,.trim
,.number
, tercakup dalam doc .sumber
v-model
danv-bind:xxx.sync
?Dengan kata sederhana
v-model
adalah untuk binding dua arah artinya: jika Anda mengubah nilai input, data yang terikat akan diubah dan sebaliknya .tetapi
v-bind:value
disebut pengikatan satu arah yang berarti: Anda dapat mengubah nilai input dengan mengubah data terikat tetapi Anda tidak dapat mengubah data terikat dengan mengubah nilai input melalui elemen .lihat contoh sederhana ini: https://jsfiddle.net/gs0kphvc/
sumber
this.data_source = 'Some new value'
data_source
, Anda berarti HTML disuntikkan di DOM dariinput
, kan?v-model
itu adalah pengikatan data dua arah, digunakan untuk mengikat elemen input html ketika Anda mengubah nilai input maka data yang dibatasi akan berubah.
v-model hanya digunakan untuk elemen input HTML
v-bind
itu adalah pengikatan data satu arah, berarti Anda hanya dapat mengikat data ke elemen input tetapi tidak dapat mengubah data terikat mengubah elemen input. v-bind digunakan untuk mengikat atribut html
ex:
<input type="text" v-bind:class="abc" v-bind:value="">
sumber
Semoga ini bisa membantu Anda dengan pemahaman dasar
sumber
Ada beberapa kasus di mana Anda tidak ingin menggunakannya
v-model
. Jika Anda memiliki dua input, dan masing-masing bergantung satu sama lain, Anda mungkin memiliki masalah referensi melingkar. Kasing penggunaan umum adalah jika Anda sedang membuat kalkulator akuntansi.Dalam kasus ini, tidak baik menggunakan pengamat atau properti yang dihitung.
Alih-alih, ambil
v-model
dan pisahkan seperti yang ditunjukkan jawaban di atasDalam praktiknya, jika Anda memisahkan logika Anda dengan cara ini, Anda mungkin akan memanggil metode.
Ini akan terlihat seperti dalam skenario dunia nyata:
sumber