Rumah > hujung hadapan web > View.js > Cara menggunakan peta dalam vue

Cara menggunakan peta dalam vue

下次还敢
Lepaskan: 2024-05-02 21:54:37
asal
1108 orang telah melayarinya

Map digunakan dalam Vue.js untuk menyimpan pasangan nilai kunci, di mana kuncinya boleh berupa sebarang jenis data. Kaedah penggunaan termasuk: mencipta Peta, menambah dan mengakses data, memadam data dan merentasi data. Peta responsif dan mengemas kini paparan secara automatik apabila ia berubah.

Cara menggunakan peta dalam vue

Penggunaan Peta dalam Vue.js

Map ialah struktur data JavaScript asli yang menyimpan pasangan nilai kunci. Ia lebih sesuai untuk menyimpan data daripada objek kerana kunci boleh menjadi sebarang jenis data, manakala kunci dalam objek mestilah rentetan.

Menggunakan Peta dalam Vue.js

Dalam Vue.js, anda boleh mencipta Peta melalui pembina Vue.Map:

<code class="javascript">const map = new Vue.Map();</code>
Salin selepas log masuk

Anda juga boleh menggunakan sintaks Peta ES6:

<code class="javascript">const map = new Map();</code>
Salin selepas log masuk

dan akses

Tambah pasangan nilai kunci pada Peta:

<code class="javascript">map.set('key', 'value');</code>
Salin selepas log masuk
Dapatkan nilai yang sepadan dengan kunci:

<code class="javascript">map.get('key');</code>
Salin selepas log masuk

Padam data

Padamkan pasangan nilai kunci daripada Peta:

rreee

Data

Trareee forEach code> Lelaran ke atas semua pasangan nilai kunci dalam Peta:

<code class="javascript">map.delete('key');</code>
Salin selepas log masuk
Gunakan entri Dapatkan lelaran semua pasangan nilai kunci:

<code class="javascript">map.forEach((value, key) => {
  console.log(`Key: ${key}, Value: ${value}`);
});</code>
Salin selepas log masuk
forEach 遍历 Map 中的所有键值对:
<code class="javascript">const entries = map.entries();
for (let entry of entries) {
  console.log(`Key: ${entry[0]}, Value: ${entry[1]}`);
}</code>
Salin selepas log masuk

使用 entries

Gunakan Kereaktifan Vue

Map adalah reaktif dalam Vue.js Ini bermakna apabila Peta berubah, paparan dikemas kini secara automatik.

<code class="javascript">const map = Vue.observable(new Map());

map.set('key', 'value'); //视图自动更新</code>
Salin selepas log masuk

Instance

Buat Peta dengan pasangan nilai kunci:

<code class="javascript">const map = new Vue.Map();
map.set('name', 'John Doe');
map.set('age', 30);</code>
Salin selepas log masuk

Lintas Peta dan cetak pasangan nilai kunci:

<code class="javascript">map.forEach((value, key) => {
  console.log(`Key: ${key}, Value: ${value}`);
});
// 输出:
// Key: name, Value: John Doe
// Key: age, Value: 30</code>
Salin selepas log masuk

Atas ialah kandungan terperinci Cara menggunakan peta dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan