Cara menggunakan v-for untuk membuat senarai dalam Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Apabila anda perlu membuat senarai atau tatasusunan dalam Vue, anda boleh menggunakan arahan v-for. Arahan v-for ialah alat teras untuk menggelung dan memaparkan senarai dalam Vue Ia boleh digunakan untuk melintasi sifat tatasusunan atau objek dan membuat templat untuk setiap item data.

Penggunaan arahan v-for adalah sangat mudah. Anda hanya perlu menambah arahan v-untuk elemen yang perlu dilalui, diikuti dengan nama pembolehubah yang akan digelung, untuk mencapai pemaparan gelung, contohnya:

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Dalam contoh ini, gunakan v- untuk Arahan merentasi tatasusunan item, menjana senarai tag li, dan memaparkan setiap item data dalam tatasusunan dalam setiap tag li.

Selain melintasi tatasusunan, arahan v-for juga boleh digunakan untuk melintasi sifat objek, contohnya:

<ul>
  <li v-for="(value, key) in object">{{ key }}:{{ value }}</li>
</ul>

Kod ini akan mengeluarkan semua sifat objek objek dan tambah nama harta dan atribut Nilai dipaparkan dalam tag li.

Apabila menggunakan arahan v-for, anda juga boleh mengawal kelakuan gelung dengan menambah parameter tambahan, seperti:

<ul>
  <li v-for="(item, index) in items">{{ index }}:{{ item }}</li>
</ul>

Dalam contoh ini, indeks parameter tambahan ditambahkan untuk Output nilai indeks gelung.

Arahan v-untuk juga boleh digunakan bersama-sama dengan arahan v-jika untuk menapis dan membuat berdasarkan syarat. Contohnya:

<ul>
  <li v-for="item in items" v-if="item !== 'apple'">{{ item }}</li>
</ul>

Dalam contoh ini, elemen li akan dipaparkan hanya jika item tidak sama dengan 'epal'.

Secara amnya, arahan v-for ialah fungsi yang sangat praktikal dalam Vue, yang boleh membantu kami dengan mudah mengulang senarai pemaparan dan mencapai kesan memaparkan data secara dinamik. Mahir dalam penggunaan arahan v-for boleh membolehkan kami membangunkan aplikasi Vue dengan lebih cekap.

Atas ialah kandungan terperinci Cara menggunakan v-for untuk membuat senarai dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!