Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini Ia mempunyai seni bina MVC (Model-View-Controller) untuk memudahkan penyepaduan data dan pandangan. Dalam Vue 3, fungsi model v memainkan peranan penting sebagai teras pengikatan data dua hala. Artikel ini akan membincangkan aplikasi biasa fungsi ini dalam aplikasi Vue.
<div id="app"> <input type="text" v-model="message"> <p>{{message}}</p> </div>
var app = new Vue({ el: '#app', data: { message: '' } })
Model ini menyediakan kotak teks satu baris dan komponen perenggan Apabila kotak teks dimasukkan, komponen perenggan memaparkan nilai yang dimasukkan dengan serta-merta. Pelaksanaan ini mudah dan intuitif, dan tidak perlu digunakan serupa dengan sintaks templat dalam Vue1 dan Vue2. Dapat dilihat bahawa fungsi v-model adalah lebih ringkas dan mudah digunakan dalam Vue 3.
<div id="app"> <input type="password" v-model.trim="password"> <input type="password" v-model.trim="confirmpassword"> <button @click="submit">Submit</button> </div>
Dalam contoh ini, pemangkasan pengubah suai fungsi v-model mengalih keluar kemungkinan input aksara yang tidak berkaitan oleh pengguna. Anda juga boleh menggunakan pengubah fungsi model v untuk menyemak sama ada input pengguna mematuhi peraturan, seperti mengehadkan bilangan aksara input, mengehadkan jenis aksara input, dsb.
<custom-input v-model="inputValue"></custom-input>
Vue.component('custom-input', { props: ['modelValue'], template: ` <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" > ` })
Dalam komponen tersuai ini, standard dengan fungsi model v Penggunaan. , prop pas dalam atribut modelValue, dan kotak input akan mengemas kini nilai modelValue secara automatik.
Atas ialah kandungan terperinci fungsi v-model dalam Vue3: aplikasi pengikatan data dua hala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!