Rumah  >  Artikel  >  hujung hadapan web  >  vue.js senarai ke tatasusunan

vue.js senarai ke tatasusunan

WBOY
WBOYasal
2023-05-24 09:00:081092semak imbas

Vue.js ialah rangka kerja JavaScript bahagian hadapan yang sangat popular. Ia menyediakan pembangun cara mudah untuk membina aplikasi satu halaman yang kompleks. Dalam Vue.js, tatasusunan biasanya digunakan untuk mewakili senarai, jadual data dan struktur data lain yang memerlukan penambahan atau pengalihan unsur secara dinamik.

Walau bagaimanapun, kadangkala, kita perlu menukar senarai Vue.js kepada tatasusunan JavaScript biasa. Ini boleh dilakukan dengan menggunakan fungsi terbina dalam Vue.js.

Vue.js menyediakan fungsi yang dipanggil "Vue.set()" untuk menukar nilai dalam objek data Vue.js. Fungsi ini menerima tiga parameter: objek, indeks dan nilai baharu. Menggunakan Vue.set() memastikan paparan dipaparkan semula Apabila objek diubah suai, Vue.js akan mengesan pengubahsuaian ini dan mengemas kini paparan.

Andaikan kami mempunyai senarai Vue.js yang mengandungi data berikut:

data: {
senarai: [

{name: 'John', age: 25},
{name: 'Mary', age: 30},
{name: 'Bob', age: 35},

]
}

Pada ketika ini, kami ingin menukar setiap objek dalam senarai kepada tatasusunan. Ini boleh dilakukan dengan menggunakan kaedah vm.$set() Vue.js. Kaedah vm.$set() membenarkan kami menambah sifat dinamik pada tika Vue.

Dalam contoh Vue, kita boleh menentukan tatasusunan kosong baharu untuk menyimpan objek senarai yang ditukar. Kami kemudiannya boleh menggunakan Vue.set() untuk meletakkan setiap objek senarai ke dalam tatasusunan kosong ini.

Berikut ialah contoh:

data: {
senarai: [

{name: 'John', age: 25},
{name: 'Mary', age: 30},
{name: 'Bob', age: 35},

],
arr: []
},
dicipta() {
this.list.forEach((item, index) => {

this.$set(this.arr, index, item);

})
}

Dalam contoh ini, kami menggunakan Vue kaedah forEach() dalam js digunakan untuk mengulangi semua elemen dalam senarai. Untuk setiap elemen, cipta kedudukan baharu dalam tatasusunan kosong dan arahkannya ke elemen. Juga, gunakan kaedah vm.$set() untuk memastikan lokasi baharu ini ditambahkan pada tika Vue.js.

Kini, kami telah berjaya menukar senarai Vue.js kepada tatasusunan JavaScript. Kita boleh menggunakan tatasusunan ini dalam templat untuk menyimpan data dan bukannya menggunakan senarai Vue.js.

Ringkasan:

Dalam Vue.js, gunakan kaedah Vue.set() untuk menukar senarai kepada tatasusunan. Ini memastikan bahawa paparan dipaparkan semula dan harus digunakan dalam situasi di mana aplikasi Vue.js perlu menambah atau mengalih keluar elemen secara dinamik. Dengan menggunakan kaedah Vue.set(), anda boleh menggunakan tatasusunan JavaScript biasa untuk menyimpan data dan bukannya perlu menggunakan senarai Vue.js.

Atas ialah kandungan terperinci vue.js senarai ke tatasusunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Apakah halaman vue?Artikel seterusnya:Apakah halaman vue?