Cara menggunakan vfor dalam vue

Arahan v-for dalam Vue.js digunakan untuk melintasi tatasusunan atau objek untuk memaparkan senarai item secara dinamik dengan menyediakan item yang mewakili item semasa dan indeks pilihan yang mewakili indeks semasa. Arahan ini boleh digunakan untuk mengulangi tatasusunan dan objek dan menentukan kunci unik menggunakan atribut :key untuk mengoptimumkan prestasi.

Penggunaan v-for dalam Vue.js

v-for ialah arahan terbina dalam Vue.js untuk merentasi tatasusunan atau objek. Ia membolehkan anda memaparkan item dalam senarai secara dinamik sambil menyediakan setiap item dengan kunci unik.

Syntax

<code><template v-for="(item, index) in collection">
  <!-- 渲染项目 -->
</template></code>

Parameter

<li> item: Item semasa dalam senarai. <li> indeks: Indeks item semasa (pilihan). <li> koleksi: Tatasusunan atau objek yang akan dilalui.

Penggunaan

Lelaran pada tatasusunan

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

Ini akan mencipta elemen <li> untuk setiap item dalam tatasusunan nama dan paparan nilai item. names 数组中的每个项目创建一个 <li> 元素，并显示项目值。

遍历对象

<code><ul>
  <li v-for="key in object">{{ key }}: {{ object[key] }}</li>
</ul></code>

这将为 object 对象中的每个键创建一个 <li> 元素，并显示键和值。

使用 index

v-for 指令还有一个可选的 index 参数，它提供当前项目的索引：

<code><ul>
  <li v-for="(item, index) in names">{{ index + 1 }}: {{ item }}</li>
</ul></code>

唯一键

每个 v-for 项目都必须具有一个唯一的键。这是因为 Vue.js 使用该键来跟踪项目的变化，并有效地更新 DOM。您可以使用 :key

Lelaran pada objek

🎜

<code><ul>
  <li v-for="item in names" :key="item">{{ item }}</li>
</ul></code>

🎜Ini akan mencipta elemen <li> untuk setiap kunci dalam objek objek dan memaparkan kunci dan nilai. 🎜🎜🎜Gunakan indeks🎜🎜🎜Arahan v-for juga mempunyai parameter index pilihan, yang menyediakan indeks projek semasa: 🎜rrreee🎜🎜Kunci unik🎜🎜🎜setiap projek v-untuk Semua mesti mempunyai kunci unik. Ini kerana Vue.js menggunakan kunci ini untuk menjejaki perubahan pada item dan mengemas kini DOM dengan cekap. Anda boleh menentukan kunci untuk projek menggunakan atribut :key: 🎜rrreee🎜Jika anda tidak memberikan kunci, Vue.js akan menggunakan projek semasa sebagai kunci lalai. Walau bagaimanapun, menggunakan kekunci eksplisit boleh meningkatkan prestasi. 🎜

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