Di Vue 3, bagaimana untuk melaksanakan input segerak kandungan kotak input berganda menggunakan REF dan dikira?

Bagaimana untuk melaksanakan input segerak kotak input berganda dalam Vue 3?

Apabila membina aplikasi Vue 3, sering kali perlu merealisasikan penyegerakan masa nyata kotak input berganda. Sebagai contoh, borang alamat, anda mahu kandungan kotak input wilayah, perbandaran, dan daerah akan digabungkan secara automatik ke dalam kotak alamat keseluruhan. Artikel ini akan memperkenalkan cara menggunakan sifat ref dan computed VUE 3 untuk melaksanakan fungsi ini dengan cekap.

Pertama, gunakan ref untuk membuat pemboleh ubah responsif untuk menyimpan nilai setiap kotak input, dan kemudian computed untuk mengira alamat yang digabungkan.

Contoh kod berikut menunjukkan proses ini:

 import {ref, dikira} dari 'vue';

// Gunakan ref untuk mewujudkan pembolehubah responsif, menyimpan nilai -nilai wilayah, bandar dan daerah masing -masing const province = ref ('');
const city = ref ('');
const conve = ref ('');

// Gunakan yang dikira untuk mengira alamat alamat yang digabungkan = dikira (() => [province.value, city.value, daerah.value] .join (''));

Dalam kod, province , city dan district sepadan dengan nilai -nilai kotak input wilayah, bandar dan daerah masing -masing. Apabila nilai-nilai ini berubah, harta computed secara automatik akan mengira semula nilai address , dengan itu penyegerakan masa nyata kandungan kotak input. Kaedah join(' ') menghubungkan nilai -nilai wilayah, bandar dan daerah dengan ruang untuk membentuk rentetan alamat lengkap.

Atas ialah kandungan terperinci Di Vue 3, bagaimana untuk melaksanakan input segerak kandungan kotak input berganda menggunakan REF dan dikira?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!